toref 顾名思义，不是ref 响应式数据，给它转成ref 响应式数据
通俗易懂的理解：
姓名：{{ person.name }}
年龄：{{ person.age }}
薪资：{{ person.job.j1.salary }}
import { reactive } from "vue";export default { setup() { let person = reactive({ name: "张三", age: 18, job: { j1: { salary: 20, }, }, }); return { person, }; },};
登录后复制
首先实现功能没问题，接下来考虑到代码优化：
那可能会想到 我在return的时候，麻烦一些，
立即学习“前端免费学习笔记（深入）”；
- return { name: person.name, age: person.age, job: person.job.j1.salary, };
登录后复制
但是，这样操作你会发现页面不是响应式的，数据修改页面不发生变化，如下：
接下来看 toRef的用法： 很明显实现了效果
姓名：{{ name }}
年龄：{{ age }}
薪资：{{ salary }}
import { reactive, toRef } from "vue";export default { setup() { let person = reactive({ name: "张三", age: 18, job: { j1: { salary: 20, }, }, }); return { name: toRef(person, "name"), age: toRef(person, "age"), salary: toRef(person.job.j1, "salary"), }; },};
登录后复制
介绍完toRef的用法之后，接下来来看一下toRefs的用法吧
以上就是Vue3中的toRef和toRefs怎么使用的详细内容，更多请关注【创想鸟】其它相关文章！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
