vue3响应式工具 toRefs() 和 toRef()

前言

直接解构响应式对象的属性进行赋值给新的变量，会导致新变量失去响应式。
当修改新变量的值时，不会触发原始响应式对象的更新，从而在模板中也不会有相应的视图更新。

示例：

<template>
  <div>
    <p>姓名: {
  { person.name }}</p>
    <p>年龄: {
  { person.age }}</p>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>
<script setup lang="ts">
import {
      reactive } from 'vue';

// person是响应式对象
const person = reactive({
     
  name: '张三',   // person.name 是响应式的
  age: 36         // person.age 是响应式的
});
// person.name = '李四' 会触发响应式更新
// person.age = 24 会触发响应式更新

// 解构赋值
let {
      name, age } = person
// 语句相当于执行：let name = person.name; let age = person.age
// 修改name、age，person的name属性、age属性不会改变

const changeName = () => {
     
  name += '哈'  // name改变了，没有触发响应式更新
  console.log(`name: ${
       name}, person.name: ${
       person.name}`); 
}
const changeAge = () => {
     
  age ++   // age改变了，没有触发响应式更新
  console.log(`age: ${
       age}, person.age: ${
       person.age}`)  
}
</script>

控制台打印结果：

let { name, age } = person 相当于执行let name = person.name; let age = person.age，使用方法changeNa