vue3的toRef与toRefs

toRef: 可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。
语法： toRef(原对象, ‘属性’)

<template>
    <h1>10-toRef与toRefs</h1>
    <hr>
    <h3>toRef</h3>
    <hr>
    <h4>{{person}}</h4>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>{{job.jobName}}</div>
    <button @click="name+='~'">姓名加~</button>
    <button @click="age++">年龄加1</button>
    <button @click="job.jobName += '累'">工作名加累</button>
</template>

<script>
import { reactive, toRef, toRefs } from '@vue/reactivity';
export default {
    name: "Vue3Study08Vue3",
    setup() {
        let person = reactive({
            name: "lin",
            age: 18,
            job:{
              jobName:'前端'
            }
        });
        return {
          person,
          name:toRef(person,'name'),
          age:toRef(person,'age'),
          job:toRef(person,'job')
        }
    },
};
</script>

toRefs: 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的
语法： toRef(原对象)

<template>
    <h1>10-toRef与toRefs</h1>
    <hr>
    <h3>toRefs</h3>
    <hr>
    <h4>{{person}}</h4>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>{{job.jobName}}</div>
    <button @click="name+='~'">姓名加~</button>
    <button @click="age++">年龄加1</button>
    <button @click="job.jobName += '累'">工作名加累</button>
</template>

<script>
import { reactive, toRef, toRefs } from '@vue/reactivity';
export default {
    name: "Vue3Study08Vue3",
    setup() {
        let person = reactive({
            name: "lin",
            age: 18,
            job:{
              jobName:'前端'
            }
        });
        return {
          person,
          ...toRefs(person),
        }
    },
};
</script>