1、问题1
如果把一个ref内的值赋值给变量,变量能响应式吗?
不能
setup() { //数据 let person = reactive({ name: "张三", age: 18, job: { j1: { salary: 20, }, }, }); const name1 = person.name; console.log("%%%", name1); //返回一个对象(常用) return { person, name1, }; }
例子:
2、问题二
如果利用ref函数将某个对象中的属性变成响应式数据,修改响应式数据会不会影响到原始数据?
不会
<template> <h4>{{ person }}</h4> <h2>姓名:{{ name }}</h2> <h2>年龄:{{ age }}</h2> <h2>薪资:{{ salary }}K</h2> <button @click="name += '~'">修改姓名</button> <button @click="age++">增长年龄</button> <button @click="salary++">涨薪</button> </template> <script> import { reactive, ref } from "vue"; export default { name: "Demo", setup() { //数据 let person = reactive({ name: "张三", age: 18, job: { j1: { salary: 20, }, }, }); return { person, name: ref(person.name), age: ref(person.age), salary: ref(person.job.j1.salary), }; }, }; </script>
3、toRef
let person = reactive({
name: "张三",
age: 18,
})
作用:创建一个 ref 对象,其value值指向另一个对象中的某个属性。
语法:
const name = toRef(person,'name')
const name = toRef(obj,'obj的属性名字')
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
对比问题1和toRef
- 使用toRef将某个对象中的属性变成响应式数据,修改响应式数据是会影响到原始数据的。
代码:
<template> <h4>{{ person }}</h4> <h2>姓名:{{ name }}</h2> <h2>年龄:{{ age }}</h2> <h2>薪资:{{ salary }}K</h2> <button @click="name += '~'">修改姓名</button> <button @click="age++">增长年龄</button> <button @click="salary++">涨薪</button> </template> <script> import { reactive, toRef } from "vue"; export default { name: "Demo", setup() { //数据 let person = reactive({ name: "张三", age: 18, job: { j1: { salary: 20, }, }, }); return { person, name: toRef(person, "name"), age: toRef(person, "age"), salary: toRef(person.job.j1, "salary"), }; }, }; </script>
4、toRefs
- 扩展:
toRefs
与toRef
功能一致,但可以批量创建多个 ref 对象,语法:toRefs(person)
- 一般用法和解构一起使用
注意:
如果在setup的return使用
return{ ...toRefs(person), }
在setup进入页面只会执行一次,如果后期再给person添加属性,这个属性不会是响应式的
代码:
<template> <h4>{{ person }}</h4> <h2>姓名:{{ name }}</h2> <h2>年龄:{{ age }}</h2> <h2>薪资:{{ job.j1.salary }}K</h2> <button @click="name += '~'">修改姓名</button> <button @click="age++">增长年龄</button> <button @click="job.j1.salary++">涨薪</button> </template> <script> import { reactive, toRefs } from "vue"; export default { name: "Demo", setup() { //数据 let person = reactive({ name: "张三", age: 18, job: { j1: { salary: 20, }, }, }); //返回一个对象(常用) return { person, ...toRefs(person), }; }, }; </script>
参考链接: