前言

不久前天看到一個比較有趣的問題，vue中data改變后，如何讓視圖同步更新，搜索了一下，并沒有發現解決問題的方法，只能從源碼去找解決方法了。

原因

我們都知道，在vue中改變數據后，視圖并不是同步更新的。

在vue實例初始化后，會將data設置為響應式對象，當我們執行this.xxx = 1時，會觸發這個響應式對象的setter。在setter中，會觸發更新，通知所有訂閱了xxx的訂閱者。但是這個觸發更新并不是同步的，它會將所有的watcher都添加到一個隊列，并在nextTick之后去更新視圖。

這就是vue不能同步更新視圖的原因。

解決方法

知道了原因，總能找到解決方法。

既然是在nextTick的時候去更新視圖，這個時候，必然會去執行一個更新視圖的方法，那么我們手動在數據改變的時候去執行這個方法，就達到了同步更新視圖的目的。

在了解源碼后，我們可以發現執行的是watcher.run()這個方法，那么問題來了，怎么去獲取這個方法？

想快速了解這一塊建議閱讀 Vue.js技術揭秘

我們在控制臺打印一下this

可以在_watcher這個對象的原型上找到run這個方法，因此問題就解決了。

執行以上代碼，在更新完數據后，手動更新視圖，就可以做到同步的效果。

更好的解決方法

如果每次想要視圖同步更新都要加一句 this._watcher.run() ，那豈不是太麻煩了，因此，我寫了一個插件，支持this.xxx = 1 之后就同步更新視圖。

這個插件原理很簡單，就是在組件的options里邊加了一個選項syncData，跟data是類似的，然后放入data里面，created鉤子調用的時候重新劫持這部分數據，syncData里邊數據改變的時候，自動觸發_watch.run()，從而同步更新視圖。

插件地址：GitHub地址

后記

講道理我覺得這個插件并沒有什么卵用，理論上這個插件能解決的問題$nextTick都可以解決。

到此這篇關于vue中data改變后讓視圖同步更新的方法的文章就介紹到這了,更多相關vue視圖同步更新內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！

原文鏈接：https://juejin.cn/post/6844904041911156750