Vue3-组合式API学习之toRefs/toRef

Vue3-组合式API学习之toRefs解构响应式对象数据

• 参考文章 https://blog.csdn.net/wuxing164/article/details/109801542

  let obj = {name : ‘alice’, age : 12}; …toRefs(obj)后 直接写即可不需要

  toRef和toRefs的区别

• toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。
• 但是需要注意，如果修改通过toRef创建的响应式数据，并不会触发UI界面的更新。
• toRef一次仅能设置一个数据

  所以，toRef的本质是引用，与原始数据有关联

• toRefs用于批量设置多个数据为响应式数据toRefs接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行

  toRefs解构响应式对象数据

• toRefs把一个响应式对象转换成普通对象 该普通对象的每个property都是一个ref，和响应式的property一一对应

  <template>
      <div>
          <p>toRefs:{{username}}</p>
          <p>Age:{{age}}</p>
          toRef:{{newObj}}
          <button style="margin-right: 20px" @click="changeRef">toRef更新数据不会更新视图</button>
          <button @click="changeRefs">toRefs更新数据更新视图</button>
      </div>
  </template>
  <script>
      //把一个响应式对象转换成普通对象 该普通对象的每个property都是一个ref，和响应式的property一一对应
      import {ref,toRef,toRefs,reactive} from 'vue'
      export default {
          setup(){
              let obj = {name : 'alice', age : 12};
              let newObj= toRef(obj, 'name');
              function changeRef(){
                  newObj.value = 'Tom';
                  console.log(obj,newObj)
              }
              function change(){
                  newObj.value = 'Tom';
                  console.log(obj,newObj)
              }
              function changeRefs() {
                  user.username = '哇哈哈'
              }
              const user = reactive({
                  username:'张三',
                  age:'18'
              });
              return{
                  newObj,
                  changeRef,
                  changeRefs,
                  ...toRefs(user)
              }
          }
      }
  </script>

赏

谢谢你请我吃糖果

支付宝

微信