refreactivetoReftoRefs的作用与区别（Vue3学习记录）

Posted 2021-05-30 ZeeH

Vue3中ref、reactive、toRef、toRefs都是与响应式数据相关的，就此做一份笔记作为区别

1.reactive[Obj]

reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本

• 获取数据值的时候直接获取，不需要加.value
• 参数只能传入对象类型

 const data=reactive({//可以创建响应式的对象
      counter:1,
      doubleCounter:computed(()=>{
       return  data.counter*2;
      })
    })

2.ref[data]

ref 用于为数据添加响应式状态

   //单值响应
      const msg2=ref(\'some msg\')

      //使用元素的引用
      const desc=ref(null);

　　

3.toRef[data]

toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。

接收两个参数：源响应式对象和属性名，返回一个ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

 const myTitle = toRef(props, \'title\')

    console.log(myTitle.value)

 

ref和toRef区别:

• ref->复制出来一个新数据, 修改响应式数据不会影响原始数据
• toRef->引用, 修改响应式数据会影响原始数据
• ref->数据发生改变, 界面就会自动更新
• toRef->数据发生改变, 界面也不会自动更新

 toRef应用场景:
      如果想让响应式数据和以前的数据关联起来, 并且更新响应式数据之后还不想更新UI, 那么就可以使用toRef

4.toRefs[arg1,...data]

可以理解为可以 解构赋值 的toRef

• 获取数据值的时候需要加.value
• toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
• 作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值。

function userCounter() {  // counter相关
    const data=reactive({//可以创建响应式的对象
      counter:1,
      doubleCounter:computed(()=>{
       return  data.counter*2;
      })
    })

   
    return toRefs(data);//可以解构赋值
    }

解构赋值引用

 const {counter,doubleCounter}=userCounter();

 

学习引用：
https://blog.csdn.net/u010059669/article/details/112287552