vue3中toRaw使用

向右看齐 2022-09-16 11:28 181阅读 0赞

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

运行结果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5LiA5p6a_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5LiA5p6a_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/611c79fa7d4642d0be1261fb1373a937.png

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3项目中使用vue-router

目录 1、Vue Router 的主要概念和功能 2、什么是 vue-router？ 3、为什么需要 vue

古城微笑少年丶/ 2023年10月12日 18:15/ 0 赞/ 8 阅读

相关 Vue3.0学习 - 第八节，toRaw 和 reactive、ref，markRaw

reactive的一些补充，先看代码： <template> <div> <p>{ {state}}</p>

àì夳堔傛蜴生んèń/ 2023年01月17日 09:16/ 0 赞/ 115 阅读

相关 Vue3中使用生命周期函数

[https://zhuanlan.zhihu.com/p/136417498][https_zhuanlan.zhihu.com_p_136417498] [https:/

Dear 丶/ 2022年11月15日 03:46/ 0 赞/ 197 阅读

相关 Vue3中computed的使用

方式一 import { computed,reactive} from 'vue' export default { name: "Lay

怼烎@/ 2022年10月15日 01:59/ 0 赞/ 2 阅读

相关 Vue3 readonly,shallowReadonly,isReadonly,isProxy,toRaw,markRaw

isProxy：用于检查一个对象是否由reactive或者readonly(shallowReadonly)方法创建的代理 readonly：用于创建一个只读的数据，并且是递

た入场券/ 2022年10月05日 11:48/ 0 赞/ 143 阅读

相关 vue3中toRaw使用

toRaw使用场景 ref/reactive数据类型每次修改都会被追踪，都会更新UI界面，但是这样是非常消耗性能的，所以如果我们有一些操作不需要追踪，不需要更新UI界面，那么

向右看齐/ 2022年09月16日 11:28/ 0 赞/ 182 阅读

相关 Vue3 中使用Vuex

[vue3.x使用vuex\_small streamed bun-CSDN博客\_vue3 vuex][vue3.x_vuex_small streamed bun-CSDN

骑猪看日落/ 2022年09月11日 10:13/ 0 赞/ 222 阅读

相关 Vue3---Vue3中使用动画(Animate.css)

安装Animate.css npm install animate.css main.js文件中引入Animate.css import "a

小鱼儿/ 2022年09月11日 05:21/ 0 赞/ 567 阅读

相关在vue3 中使用echarts

1,安装echarts npm install echarts --save 2,在main.js中导入 import { createApp } fro

待我称王封你为后i/ 2022年08月29日 13:45/ 0 赞/ 217 阅读

相关 vue3.0中setup使用

setup 　　1、 beforeCreate：表示组件刚刚被创建出来，组件的data和methods还没有初始化好

た入场券/ 2021年09月02日 10:24/ 0 赞/ 547 阅读