Vue3的toRaw和markRaw

1、toRaw

toRaw返回由 reactive 或 readonly 方法转换成响应式代理的普通对象。
这是一个还原方法，可用于临时读取，访问不会被代理/跟踪，写入时也不会触发界面更新。

person是一个响应式对象，通过toRaw(person)得到的user，是一个普通对象，不再是一个响应式对象。
更改user.age的值时，页面不会更新。
只有更改person.age的值时，页面才会更新。

 var person = reactive({
      name: "long",
      age: 23,
    });
    var user = toRaw(person);
    var change = () => {
      user.age++;
      console.log(user)
    };
    return {
      user,
      person,
      change,
    };

2、markRaw

标记一个对象，使其永远不会转换为代理。返回对象本身

person是一个响应式对象，
通过person.likes=likes，往person中添加的属性，那么这个新添加的属性likes也会是响应式的。
如果通过person.likes= markRaw(likes)，往person中添加的属性，那么likes被标记为不是响应式的，那么这个新添加的属性就不是响应式的，更改它的值不会更新页面。

  setup() {
    var person = reactive<UserInfo>({
      name: "long",
      age: 23,
    });
    var likes = ['吃饭','睡觉'];
    person.likes = markRaw(likes);
    var change = () => {
      person.likes[0] += '==';
      console.log(person.likes);
    };
    return {
      person,
      change,
    };
  },