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

前言

不久前天看到一個比較有趣的問題,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(),從而同步更新視圖。

插件地址:GitHub地址

後記

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

到此這篇關於vue中data改變後讓視圖同步更新的方法的文章就介紹到這瞭,更多相關vue視圖同步更新內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!