vue3中toRaw使用

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); //truefunction 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); //truefunction myFn(){obj2.name='zs'console.log(state); console.log(obj2);  }return {myFn,state}},

运行结果：

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

vue3中toRaw使用相关推荐

Vue3中使用Monaco Editor代码编辑器记录～持续更新
Vue3中使用Monaco Editor代码编辑器记录-持续更新因为毕设需要用到代码编辑器,根据调研,我选择使用monaco-editor代码编辑器前端框架使用Vue3 + elementUI m ...
web前端培训分享：使用Dplayer实现Vue3中的视频及弹幕播放
Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML.Vue.React中实现视频播放的功能需求.Dplayer同时也提供了目前各大视频站都在使用的弹幕功能 ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
vue3中v-model的重大更新
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 Vue.component('custom-input', {props: ['value'],te ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...
vue3中 v-md-editor 编辑器的基本使用分享
vue3中 v-md-editor 编辑器的基本使用分享安装 (2.3.15以上) # npm npm install @kangc/v-md-editor -S # yarn yarn add @ ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...

vue3中toRaw使用

vue3中toRaw使用相关推荐

最新文章

热门文章