如何使用vue中的watcher

這篇文章主要介紹了vue 中的watcher的相關資料,需要的朋友可以參考下

#觀察Watchers

##雖然計算屬性在大多數情況下更合適，但有時也需要一個自訂的watcher 。這就是為什麼 Vue 提供一個更通用的方法透過watch 選項，來回應資料的變化。當你想要在資料變化回應時，執行非同步操作或開銷較大的操作，這是很有用的。

大家對於watch 應該不陌生，專案中都用過下面這種寫法：

上面的寫法告訴vue，我需要監聽someProp 屬性的變化，於是vue 在內部就會為我們建立一個watcher 物件。 （限於篇幅，我們不聊watcher 的具體實現，感興趣的可以直接看源碼watcher）

#然而在vue 中，watcher 的功能並沒有這麼單一，先上段代碼：

在線demo

上面程式碼非常簡單，我們現在主要關注created 鉤子中打印的this._watchers，如下：

#分別展開三個watcher，觀察每一個expression，從上到下分別為：

上面三個watcher 代表了三個不同功能的watcher，我們將其依功能分為三類：

• 在watch 中定義的，用於監聽屬性變化的watcher （第二個）

• 用於computed 屬性的watcher （第一個）

• 用於頁面更新的watcher （第三個）

normal-watcher

我們在watch 中定義的，都屬於這種類型，即只要監聽的屬性改變了，都會觸發定義好的回調函數

#computed-watcher

每一個computed屬性，最後都會產生一個對應的watcher 對象，但是這類watcher 有個特點，我們拿上面的b 舉例：

屬性b 依賴a，當a 改變的時候，b 並不會立即重新計算，只有之後其他地方需要讀取b 的時候，它才會真正計算，即具備lazy（懶計算）特性

render-watcher

每一個元件都會有一個

render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }, 當data/computed

中的屬性改變的時候，會呼叫該render-watcher 來更新元件的視圖

#三種watcher 的執行順序

除了功能上的區別，這三種watcher 也有固定的執行順序，分別是：

這樣安排是有原因的，這樣就能盡可能的保證，在更新組件視圖的時候，computed 屬性已經是最新值了，如果render-watcher 排在computed-render 前面，就會導致頁面更新的時候computed 值為舊資料。

下面從一段實例程式碼看下vue中的watcher

#在這個範例中，使用watch 選項允許我們執行非同步操作（訪問一個API），限制我們執行該操作的頻率，並在我們得到最終結果之前，設定中間狀態。這是計算屬性無法做到的。

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在Vue中有關響應式原理（詳細教程）

在angularjs中如何實作柱狀圖動態加載

在Angular作用域中scope的如何使用

#使用react如何實作選單權限控制

詳細解讀vue.js中props如何傳遞參數

以上是如何使用vue中的watcher的詳細內容。更多資訊請關注PHP中文網其他相關文章！