vue3 toRaw与markRaw

Vue3.0给我们提供的这两个方法，toRaw方法是把被reactive或readonly后的Proxy对象转换为原来的target对象，而markRaw则直接让target不能被reactive或readonly。

toRaw

作用原理：
1.toRaw
  从Reactive 或 Ref中得到原始数据
2.toRaw作用
  做一些不想被监听的事情(提升性能)

// ref/reactive数据类型的特点:
// 每次修改都会被追踪, 都会更新UI界面, 但是这样其实是非常消耗 性能的
// 所以如果我们有一些操作不需要追踪, 不需要更新UI界面, 那么这个时候,
// 我们就可以通过toRaw方法拿到它的原始数据, 对原始数据进行修改
// 这样就不会被追踪, 这样就不会更新UI界面, 这样性能就好了

// ref本质: reactive   ref(obj) -> reactive({value: obj})

let state = reactive(
     {name:'lnj', age:18}
);
// 获取state的源数据
let obj2 = toRaw(state);

// console.log({name:'lnj', age:18} === obj2); // true
// console.log({name:'lnj', age:18} === state); // false

function myFn() {
    // 获取的源数据更改，不会触发页面更新
    obj2.name = 'zs';
    console.log(obj2); // {name: "zs", age: 18}
     // state.name = 'zs';
     // console.log(state);// {name: "zs", age: 18}
}

markRow

将数据标记为永远不能追踪的数据， 一般在编写自己的第三方库时使用

let obj = {name: 'lnj', age: 18};
// 不能追踪，监听，作为响应式的数据
obj = markRaw(obj);
let state = reactive(obj);
function myFn() {
  // 数据更改了，但是页面ui还是没有发生改变
  state.name = 'zs';
}