toRaw使用场景

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

reactive:

  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
    }
  },

运行结果:

 

 这样虽然数据被修改,但是不会更新ui界面

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐