vue3中toRaw使用

最新推荐文章于 2025-10-24 13:32:07 发布

原创最新推荐文章于 2025-10-24 13:32:07 发布 · 2.6w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#toRaw #vue3

vue3 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Vue的setup函数中，如何利用toRaw方法从reactive或ref创建的响应式对象获取原始数据，以防止不必要的UI更新，从而提高性能。示例展示了在修改toRaw获取的原始数据后，尽管数据改变但不会触发UI界面的更新。

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

运行结果：