Vue3 toRaw 与 markRaw

1、toRaw

作用：返回将reactive，readonly， shallowReactive 或者 shallowReadonly 这个四个方法包裹的原始数据。如下图

toRaw返回的数据与包裹之前的数据一个地址值数据，也就是两个数据是相等。

注意：toRaw不能乱用，因为会使数据失去响应式。

2、markRaw

作用：标记数据不可变为代理数据，也就是reactive，readonly， shallowReactive 或者 shallowReadonly 这四个方式不能将markRaw标记的数据转为响应式数据。官网也解释为什么用markRaw的理由：

1. 有些值根本不应该是被动的，例如复杂的第三方类实例或Vue组件对象。
2. 当呈现具有不可变数据源的大型列表时，跳过代理转换可以提高性能。
   用法如下图：
   
   可以看出对象mark是没有被代理的，通过markRaw包裹的数据，vue3会自动给这个数据添加一个__v_skip属性，值为true，代理的时候会根据__v_skip的属性值判断是否代理。
   注意：如果单独用mark数据中某一个属性，照样也能被代理，因为markRaw作用的是这一个整体数据，而不是没有作用到数据中每一个属性，也可以理解为markRaw是一个浅包裹，不是一个深度包裹。