ref、reactive、toRef、toRefs的作用与区别(Vue3学习记录)

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
上一篇:java8 stream操作总结


下一篇:Reactive(1) 从响应式编程到"好莱坞"