上一篇:
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