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

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

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