09_Vue3中的 toRef 和 toRefs

toRdf

• 作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。
• 语法：

  const name = toRef(person,'name')

• 应用：要将响应式对象中的某个属性单独提供给外部使用时。
• 扩展：toRef 与 toRefs 功能一致，但是 toRefs 可以批量创建多个 ref 对象，语法：

  toRefs(person)

 代码如下

<template><h4>{{person}}</h4><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2>
<!--  用toRef时，可以直接用{{salary}}，用toRefs时，因为拿出来的实际上是job,所以需要用{{job.j1.salary}}--><h2>薪资：{{job.j1.salary}}K</h2><button @click="name+='~'">修改姓名</button><button @click="age++">增加年龄</button><button @click="job.j1.salary++">涨薪</button>
</template><script>
import {ref,reactive,toRef,toRefs} from 'vue'
export default {name: 'Demo',setup() {//数据let sum = ref(0)let msg = ref('你好啊')let person = reactive({name:'张三',age:18,job:{j1:{salary:20}}})//返回一个对象(常用)return {//直接返回整个person对象person,// 用toRef把person中的每个属性单独拿出来// name: toRef(person,'name'),// age: toRef(person,'age'),// salary: toRef(person.job.j1,'salary'),// 用toRefs 把多个属性拿出来...toRefs(person),}}
}
</script>