vue3中toRef和toRefs

toRef，将一个数据变成响应式数据。
toRefs，将多个数据变成响应式数据。 

<template>
  <h2>{{ person }}</h2>
  <button @click="ref_age++">ref_age++</button>
  <button @click="ref_salary++">ref_salary++</button>
  <button @click="ref_j1.salary++">ref_j1.salary++</button>

  <button @click="change">change</button>
  <button @click="job.j1.salary++">job.j1.salary++</button>
</template>

<script setup>
import { toRef, toRefs } from "@vue/reactivity";

let person = reactive({
  name: "张三",
  age: 18,
  job: {
    j1: {
      salary: 20,
    },
  },
});

let ref_age = toRef(person, "age");
let ref_salary = toRef(person.job.j1, "salary");
let ref_j1 = toRef(person.job, "j1");

let { name, job } = toRefs(person);
function change() {
  name.value = "李四";
  job.value.j1.salary++;
}
</script>