vue3 toRef toRefs toRaw使用

// 只能修改响应式对象的值
const person = reactive({ name: "zhangsan", age: 18 });

// 将age属性单独提出来响应式数据
const ageCopy = toRef(person, "age");

const change = () => {
  // person.age = 36  // 更新任意一个时两个都会同步更新
  ageCopy.value = 36; // 更新任意一个时两个都会同步更新
};
// const { name, age } = person; // 解构并不是响应式的,并不能读取value属性
const { name, age } = toRefs(person); // 结构响应式更新
name.value = "list";
age.value = 30;

const personCopy = toRaw(person) // 将响应式转换为普通数据