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界面

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐