vue3中toRaw使用

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

reactive:

<template>
    <p>{{state}}</p>
    <button @click="myFn">按钮点击</button>
</template>
.....
  setup() {
    let obj={name:'lj',age:18}
    let state=reactive(obj)
    let obj2=toRaw(state)   
    console.log(obj===obj2); //true
    
    function myFn(){
      obj2.name='zs'
      console.log(state); //Proxy {name: "zs", age: 18}
      console.log(obj2);  //{name: "zs", age: 18}
    }
    return {
      myFn,state
    }
  },

ref:

  setup() {
    let obj={name:'lj',age:18}
    let state=ref(obj)
    let obj2=toRaw(state.value)   
    console.log(obj===obj2); //true
    
    function myFn(){
      obj2.name='zs'
      console.log(state); 
      console.log(obj2);  
    }
    return {
      myFn,state
    }
  },

运行结果：（点击按钮时视图state值并没有更新）

结论：
这样虽然数据被修改，但是不会更新ui界面