vue3中toRaw使用

向右看齐 2022-09-16 11:28 149阅读 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 条评论，149人围观）

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

相关阅读

相关 Vue3中Vue Router的使用区别

在 Vue 3 中，useRouter和useRoute是两个用于 Vue Router 的 Composition API 函数，它们的用途和返回的对象不同，接下来详细...

╰+哭是因爲堅強的太久メ/ 2024年04月29日 01:03/ 0 赞/ 35 阅读

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

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

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

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

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

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

相关 Vue3---Vue3的setup函数中如何使用路由

方式一：通过 getCurrentInstance 方法获取当前组件实例，从而获取 route 和 router <template> <div

怼烎@/ 2022年10月29日 10:21/ 0 赞/ 592 阅读

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

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

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

相关 vue3中toRaw使用

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

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

相关 Vue3 中使用Vuex

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

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

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

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

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

相关在vue3 中使用echarts

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

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

相关 vue3.0中setup使用

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

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