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';
}
