10.0 vue3 toRef&toRefs

上一篇：

vue3 自定义hook函数https://blog.csdn.net/qq_42543244/article/details/122644055

本篇记录vue3 toRef&toRefs的使用;

当我们的数据是一个多层的数据之后，我们需要去渲染数据的时候往往会写成 obj.a.b.c.d 等，看起来很费劲，为此vue3提供了toRef和toRefs的api，来帮助我们写更少的代码；这里我把原始的写法，toRef的写法，toRefs的写法放在了一起，以供大家区别使用；

<template>
  <h2>姓名：{{ data.name }}</h2>
  <h2>年龄：{{ data.age }}</h2>
  <h2>爱好：{{ data.hobby }}</h2>
  <h2>工作薪酬：{{ data.job.j1.money }} K</h2>
  <button @click="data.name = '李四'">改变姓名</button>
  <button @click="data.age += 1">改变年龄</button>
  <button @click="data.hobby[1] = '看比赛'">改变爱好</button>
  <button @click="data.job.j1.money += 1">改变薪酬</button>
  <hr />
  <h1>toRef</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>爱好：{{ hobby }}</h2>
  <h2>工作薪酬：{{ money }} K</h2>
  <button @click="name = '李四'">改变姓名</button>
  <button @click="age += 1">改变年龄</button>
  <button @click="hobby[1] = '看比赛'">改变爱好</button>
  <button @click="money += 1">改变薪酬</button>
  <hr />
  <h1>toRefs</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>爱好：{{ hobby }}</h2>
  <h2>工作薪酬：{{ job.j1.money }} K</h2>
  <button @click="name = '李四'">改变姓名</button>
  <button @click="age += 1">改变年龄</button>
  <button @click="hobby[1] = '看比赛'">改变爱好</button>
  <button @click="job.j1.money += 1">改变薪酬</button>
</template>

<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "Demo",
  setup() {

    /*
  toRef
   作用：创建一个ref对象，使其value值指向另一个对象中的某个属性
   应用：要将响应式对象中的某个属性单独提供给外部使用
   toRef与toRefs功能一致，后者可以批量的创建多个多个ref对象，注：只有对象的首层属性值
*/
    let data = reactive({
      name: "张三",
      age: 18,
      hobby: ["打篮球", "听音乐", "玩游戏"],
      job: {
        j1: {
          money: 10,
        },
      },
    });
    return {
      data,
      // toRef 写法
      name: toRef(data, "name"),
      age: toRef(data, "age"),
      hobby: toRef(data, "hobby"),
      money: toRef(data.job.j1, "money"),
      // toRefs 写法
      ...toRefs(data),
    };
  },
};
</script>

下一篇：

vue3 shallowRef&shallowReactivehttps://blog.csdn.net/qq_42543244/article/details/122771740