toRef

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

• 语法：const name = toRef(person,'name')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(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 { ref, reactive, toRef, toRefs } from "vue";
  export default {
    name: "Demo",
    setup() {
      //数据
      let person = reactive({
        name: "张三",
        age: 18,
        job: {
          j1: {
            salary: 20,
          },
        },
      });

      // const name1 = person.name
      // console.log('%%%',name1)

      // const name2 = toRef(person,'name')
      // console.log('####',name2)

      const x = toRefs(person);
      console.log("******", x);

      //返回一个对象（常用）
      return {
        person,
        // name:toRef(person,'name'),
        // age:toRef(person,'age'),
        // salary:toRef(person.job.j1,'salary'),
        ...toRefs(person),
      };
    },
  };
</script>