溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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()，從而同步更新視圖。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue中data改變后讓視圖同步更新的原因是什么”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
