1 toRef:
作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
语法：const name = toRef(person,'name')
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
按照传统的方式我们在setup中返回的对象 在模板显示 需要对象.属性名的形式
正常写法：
<template>
<div>
<h2> 人的信息</h2>
<p>姓名 {{person.name}}</p>
<p>年龄 {{person.age}}</p>
<p>性别 {{person.sex}}</p>
<p>工作详情 内容{{person.job.name}} 薪资{{person.job.salary}}</p>
</div>
</template>使用toRef的写法：
<template>
<div>
<h2> 人的信息</h2>
<p>姓名 {{name}}</p>
<p>年龄 {{age}}</p>
<p>性别 {{sex}}</p>
<p>工作详情 内容{{job.name}} 薪资{{job.salary}}</p>
</div>
</template>
<script>
import { reactive,provide,toRef,toRefs } from 'vue';
export default {
setup() {
let person = reactive({
name:'张三',
age:18,
sex:'男',
job:{
name:'UI开发',
salary:'20K'
}
})
return {
person,
name:toRef(person,'name'),
age:toRef(person,'age'),
sex:toRef(person,'sex'),
job:toRef(person,'job'),
}
},
};
</script>2 toRefs:
??将响应式对象中所有属性包装为ref对象, 并返回包含这些ref对象的普通对象
<script>
import { reactive,provide,toRef,toRefs } from 'vue';
export default {
setup() {
let person = reactive({
name:'张三',
age:18,
sex:'男',
job:{
name:'UI开发',
salary:'20K'
}
})
return {
//person,
// name:toRef(person,'name'),
// age:toRef(person,'age'),
// sex:toRef(person,'sex'),
// job:toRef(person,'job'),
...toRefs(person)
}
},
};
</script>
?
