vue中data更新但视图未更新,vue data 对象 更新

　　本文主要介绍vue中数据发生变化后同步更新视图的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。

前言

　　不久前，我看到一个有趣的问题。vue中的数据发生变化后，如何让视图同步更新？找了半天，也没找到解决问题的办法。我不得不从源代码中寻找解决方案。

原因

　　众所周知，在vue中更改数据后，视图并没有同步更新。

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

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

解决方法

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

　　由于我们在nextTick更新视图，此时必然会执行一个更新视图的方法，所以我们在数据发生变化时手动执行这个方法，从而达到同步更新视图的目的。

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

　　想快速了解这一块，请阅读Vue.js的技术秘密

　　让我们在控制台上打印这个。

　　可以在object _watcher的原型上找到run方法，这样问题就解决了。

　　this . XXX=1；

　　这个。_watcher.run()

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

更好的解决方法

　　如果非要加上这个岂不是太麻烦了。_watcher.run()每次想同步更新视图？所以我写了一个支持在this.xxx=1之后同步更新视图的插件。

　　这个插件的原理很简单，就是在组件的选项中加入一个选项syncData，类似于Data，然后放入data。当创建的钩子被调用时，它再次劫持这部分数据。当syncData中的数据发生变化时，会自动触发_watch.run()同步更新视图。

　　插件地址：GitHub地址

后记

　　按理说，我觉得这个插件没用。理论上，这个插件能解决的问题，都可以用$nextTick解决。

　　关于vue中数据变化后如何同步更新视图的文章到此结束。有关vue视图同步更新的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。