文章目录

• • ref概念
  • toRef / toRefs
  • • 不加 s 和 加 s 的区别就是这样：
    • • toRef代码
      • toRef效果
      • toRefs代码
      • toRefs效果
    • 实际应用场景

ref概念

ref是对原始数据的拷贝，当修改ref数据时，模板中的视图会发生改变，但是原始数据并不会改变。
ref生成值类型的响应式数据,ref用来定义，基本类型数据 取值的时候通过 .value修改值。

toRef / toRefs

toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref，而且它既保留了响应式，也保留了引用，也就是你从 reactive 复制过来的属性进行修改后，除了视图会更新，原有 ractive 里面对应的值也会跟着更新，它复制的其实就是引用 + 响应式 ref。

不加 s 和 加 s 的区别就是这样：

toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref

toRef代码

toRef效果

toRefs代码

toRefs效果

toRefs

*template 要想访问 toRefs 的值，需要带上 .value 如果不带上，就会出现双引号。
*template 要想访问 toRef 的值，不需要带上 .value

实际应用场景

toRefs响应式

将它放到 js 文件里面去，在需要的地方引入进来即可，无需再去重复声明，这两属性就是用来避免重复声明 reactive 的。