vue3 中的toRef函数和toRefs函数的基本使用

这篇我们看下toRef和toRefs的基本使用

我们知道ref可以用于创建一个响应式数据，而toRef也可以创建一个响应式数据，那他们之间有什么区别呢？
事实上，如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据。

import {ref} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= ref(obj.name);
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

上述代码，当change执行的时候，响应式数据发生改变，而原始数据obj并不会改变。
原因在于，ref的本质是拷贝，与原始数据没有引用关系

需要注意ref(obj.name)相当于ref('alice')相当于reactive({value:'alice'})
所以在修改数据时，是修改newObj.value=xxx

而如果使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。但是需要注意，如果修改通过toRef创建的响应式数据，并不会触发UI界面的更新。
所以，toRef的本质是引用，与原始数据有关联

import {toRef} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRef(obj, 'name');
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

上述代码，当change执行的时候，响应式数据发生改变，原始数据obj并不会改变，但是UI界面不会更新

小结：
ref和toRef的区别
(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

所以如果想让响应式数据和以前的数据关联起来，并且想在更新响应式数据的时候不更新UI，那么就使用toRef

有的时候，我们希望将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，并且更新响应式数据的时候不更新界面，就可以使用toRefs，用于批量设置多个数据为响应式数据。(toRef一次仅能设置一个数据)
toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行
例如

import {toRefs} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRefs(obj);
    function change(){
      newObj.name.value = 'Tom';
      newObj.age.value = 18;
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

Vue3的toRef

更改person.age的值时，

通过ref(person.age)得到的age1不会改变，因为ref是复制，拷贝了一份新的数据值单独操作, 更新时相互不影响

通过toRef(person,‘age’)得到的age2会改变，因为 toRef是引用。它为源响应式对象上的某个属性创建一个 ref对象, 二者内部操作的是同一个数据值, 更新时二者是同步的

  setup() {
    let person =reactive( { name: "long",age:23 });

    let age1 = ref(person.age);
    let age2=toRef(person,'age')

    const change1 = () => {
      person.age++
    };
    return {
      age1,
      age2,
      change1,
    };
  },

应用: 当要将 某个prop 的 ref 传递给复合函数时，toRef 很有用

useFeatureX函数需要使用props中的foo属性，且foo要为ref。

  setup (props, context) {
    const length = useFeatureX(toRef(props, 'foo'))

    return {
      length
    }
  }

到此这篇关于vue3 toRef函数和toRefs函数的文章就介绍到这了,更多相关vue3 toRef和toRefs函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论