vue中data改变后让视图同步更新的方法

前言

不久前天看到一个比较有趣的问题，vue中data改变后，如何让视图同步更新，搜索了一下，并没有发现解决问题的方法，只能从源码去找解决方法了。

原因

我们都知道，在vue中改变数据后，视图并不是同步更新的。

在vue实例初始化后，会将data设置为响应式对象，当我们执行this.xxx = 1时，会触发这个响应式对象的setter。在setter中，会触发更新，通知所有订阅了xxx的订阅者。但是这个触发更新并不是同步的，它会将所有的watcher都添加到一个队列，并在nextTick之后去更新视图。

这就是vue不能同步更新视图的原因。

解决方法

知道了原因，总能找到解决方法。

既然是在nextTick的时候去更新视图，这个时候，必然会去执行一个更新视图的方法，那么我们手动在数据改变的时候去执行这个方法，就达到了同步更新视图的目的。

在了解源码后，我们可以发现执行的是watcher.run()这个方法，那么问题来了，怎么去获取这个方法？

想快速了解这一块建议阅读 Vue.js技术揭秘

我们在控制台打印一下this

可以在_watcher这个对象的原型上找到run这个方法，因此问题就解决了。

 this.xxx = 1;
 this._watcher.run()

执行以上代码，在更新完数据后，手动更新视图，就可以做到同步的效果。

更好的解决方法

如果每次想要视图同步更新都要加一句 this._watcher.run() ，那岂不是太麻烦了，因此，我写了一个插件，支持this.xxx = 1 之后就同步更新视图。

这个插件原理很简单，就是在组件的options里边加了一个选项syncData，跟data是类似的，然后放入data里面，created钩子调用的时候重新劫持这部分数据，syncData里边数据改变的时候，自动触发_watch.run()，从而同步更新视图。

插件地址：GitHub地址

后记

讲道理我觉得这个插件并没有什么卵用，理论上这个插件能解决的问题$nextTick都可以解决。

到此这篇关于vue中data改变后让视图同步更新的方法的文章就介绍到这了,更多相关vue视图同步更新内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决vue中对象属性改变视图不更新的问题

    常规情况下我们在vue实例的data中设置响应数据.但当数据为对象,我们增加或删除对象属性值时,视图并不触发更新,如何解决这个问题呢? 实例代码如下: let vm = new Vue{ el: '#app', data: { obj: { k: 'v' } }, ... } 有三种解决方案: 方案一:利用Vue.set(object,key,val) 例:Vue.set(vm.obj,'k1','v1') 方案二:利用this.$set(this.obj,key,val) 例:this.$se

  • vue视图不更新情况详解

    vue视图不更新情况详解

    我们可能经常会在处理vue项目的时候,遇到数据变化,但是视图并没有实时渲染的情况 vue视图为什么不渲染页面的原因 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器 划重点!!!! 这些 g

  • 解决vue中修改了数据但视图无法更新的情况

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个

  • vue中data改变后让视图同步更新的方法

    vue中data改变后让视图同步更新的方法

    前言 不久前天看到一个比较有趣的问题,vue中data改变后,如何让视图同步更新,搜索了一下,并没有发现解决问题的方法,只能从源码去找解决方法了. 原因 我们都知道,在vue中改变数据后,视图并不是同步更新的. 在vue实例初始化后,会将data设置为响应式对象,当我们执行this.xxx = 1时,会触发这个响应式对象的setter.在setter中,会触发更新,通知所有订阅了xxx的订阅者.但是这个触发更新并不是同步的,它会将所有的watcher都添加到一个队列,并在nextTick之后去更

  • Vue data中随意改一个属性,视图都会更新?

    Vue data中随意改一个属性,视图都会更新?

    面试官:看过 Vue 的源码没? 候选者:看过. 面试官:那你说下 Vue data 中随意更改一个属性,视图都会被更新吗? 候选者:不会. 面试官:why? 候选者:如果该属性没有被用到 template 中,就没有必要去更新视图,频繁这样性能不好. 面试官:那 Vue 中是如何去实现该方案的? 候选者:在实例初始化过程中,利用Object.defineProperty对 data 中的属性进行数据监听,如果在 template 中被使用到的属性,就被 Dep 类收集起来,等到属性被更改时会调

  • Vue data中随意改一个属性,视图都会更新吗?

    Vue data中随意改一个属性,视图都会更新吗?

    面试官:看过 Vue 的源码没? 候选者:看过. 面试官:那你说下 Vue data 中随意更改一个属性,视图都会被更新吗? 候选者:不会. 面试官:why? 候选者:如果该属性没有被用到 template 中,就没有必要去更新视图,频繁这样性能不好. 面试官:那 Vue 中是如何去实现该方案的? 候选者:在实例初始化过程中,利用Object.defineProperty对 data 中的属性进行数据监听,如果在 template 中被使用到的属性,就被 Dep 类收集起来,等到属性被更改时会调

  • Vue中通过vue-router实现命名视图的问题

    在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示 例如:创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了 在路由对象中 使用components属性 以使一个路径下可挂载多个子组件: 之后即可为每个要展示的组件指定一个名字 默认name为default 即 不设置名字 <script> var header={ template:"<h1>头部</h1>" } var leftBox=

  • vue中data的基础汇总

    vue中data的基础汇总

    目录 vue中如何重置data 组件中的data为什么是一个函数 为什么new Vue里的data可以是一个对象 vue中如何重置data 重置data需要了解3个小知识点 (1)this.$data获取组件当前状态的data对象 (2)this.$options.data获取组件初始状态的data对象 (3)Object.assign()方法用于将所有可美剧属性的值从一个或者多个源对象复制到目标对象,并返回目标对象. Object.assign(target,source1,source2,.

  • 解决vue脚手架项目打包后路由视图不显示的问题

    脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题. 解决办法如下: Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 scrollBehavior: () => ({ y: 0 }), routes }) 比如我是将打包后的dist和ind

  • 简单聊一聊vue中data的代理和监听

    目录 假设现在有一个data 需求一: 用 Object.defineProperty 定义 n 需求二:n不能小于0 所以就有了需求三:不暴露data中可以设置的属性,而是使用一个代理 因此引出了需求四:就算用户擅自修改myData,也要进行拦截 总结 接下来通过几个需求的完成来一步步看看data中的代理和监听是怎么样的 假设现在有一个data let data0 = { n:0 } 需求一: 用 Object.defineProperty 定义 n let data1 = {} Object

  • vue中自定义指令（directive）的基本使用方法

    vue中自定义指令（directive）的基本使用方法

    目录 前言 正文 1.全局注册 2.局部注册 3.钩子函数及参数设置 4.灵活用法 (1)动态指令参数 (2)函数简写方式 (3)对象字面量方式 5.使用场景 写在最后 前言 在vue项目中我们经常使用到 v-show ,v-if,v-for等内置的指令,除此之外vue还提供了非常方便的自定义指令,供我们对普通的dom元素进行底层的操作.使我们的日常开发变得更加方便快捷.本文就来总结一下自定义指令的使用方法及常用的场景. 正文 1.全局注册 这里全局注册一个指令,用于使用该指令的元素加一个红色边

  • vue请求服务器数据后绑定不上的解决方法

    后台返回的数据,json类型 {"success":1,"tagList":[{"Id":1,"name":"林俊杰"},{"Id":2,"name":"MV"},{"Id":3,"name":"三次元"},{"Id":4,"name":"

随机推荐