快捷導(dǎo)航

vue中data改變后讓視圖同步更新的方法

更新時(shí)間：2021年03月28日 11:15:52 作者：TGuoW

這篇文章主要給大家介紹了關(guān)于vue中data改變后讓視圖同步更新的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

不久前天看到一個(gè)比較有趣的問(wèn)題，vue中data改變后，如何讓視圖同步更新，搜索了一下，并沒(méi)有發(fā)現(xiàn)解決問(wèn)題的方法，只能從源碼去找解決方法了。

原因

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

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

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

解決方法

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

既然是在nextTick的時(shí)候去更新視圖，這個(gè)時(shí)候，必然會(huì)去執(zhí)行一個(gè)更新視圖的方法，那么我們手動(dòng)在數(shù)據(jù)改變的時(shí)候去執(zhí)行這個(gè)方法，就達(dá)到了同步更新視圖的目的。

在了解源碼后，我們可以發(fā)現(xiàn)執(zhí)行的是watcher.run()這個(gè)方法，那么問(wèn)題來(lái)了，怎么去獲取這個(gè)方法？

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

我們?cè)诳刂婆_(tái)打印一下this

可以在_watcher這個(gè)對(duì)象的原型上找到run這個(gè)方法，因此問(wèn)題就解決了。

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

執(zhí)行以上代碼，在更新完數(shù)據(jù)后，手動(dòng)更新視圖，就可以做到同步的效果。

更好的解決方法

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

這個(gè)插件原理很簡(jiǎn)單，就是在組件的options里邊加了一個(gè)選項(xiàng)syncData，跟data是類(lèi)似的，然后放入data里面，created鉤子調(diào)用的時(shí)候重新劫持這部分?jǐn)?shù)據(jù)，syncData里邊數(shù)據(jù)改變的時(shí)候，自動(dòng)觸發(fā)_watch.run()，從而同步更新視圖。

插件地址：GitHub地址