vue3中toRef和toRefs函数

1、问题1

如果把一个ref内的值赋值给变量，变量能响应式吗？

不能

  setup() {
    //数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    const name1 = person.name;
    console.log("%%%", name1);
    //返回一个对象（常用）
    return {
      person,
      name1,
    };
  }

例子：

2、问题二 

如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据会不会影响到原始数据？

不会

3、toRef

let person = reactive({

      name: "张三",

      age: 18,

}）

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')

•     const name = toRef(obj,'obj的属性名字')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

对比问题1和toRef

•  使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。

 代码：

4、toRefs

• 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

•  一般用法和解构一起使用

注意：

如果在setup的return使用

return{

...toRefs(person),

}

在setup进入页面只会执行一次，如果后期再给person添加属性，这个属性不会是响应式的

代码：

参考链接：

尚硅谷Vue2.0+Vue3.0全套教程，全网最新最强vuejs从入门到精通_哔哩哔哩_bilibili