在 Vue 中,$watch 方法被用來觀察 Vue 實例中的數據變化,一旦被觀察到數據發生變化,$watch 方法會執行對應的回調函數。$watch 方法一般有兩種用法:
// 監聽一個數據變化 vm.$watch('a', function (newVal, oldVal) { // 響應數據變化... })
// 監聽一個數據變化,并返回一個取消監聽函數 var unwatch = vm.$watch('a', function (newVal, oldVal) { // 響應數據變化... }) // 取消監聽 unwatch()
這兩種用法中,第一種用法比較常見,需要注意的是,$watch 方法返回的是一個取消監聽函數,可以用于停止監聽。
另外,$watch 方法支持用對象的方式來監聽多個數據的變化,這種用法也非常常見:
vm.$watch({ a: function (newVal, oldVal) { // 響應數據變化... }, b: function (newVal, oldVal) { // 響應數據變化... }, // ... })
需要注意的是,對象格式的監聽器只能在 2.5.0+ 的版本中使用,并且被監聽的屬性必須是 String 類型,否則會拋出警告。
關于 $watch 的使用,還有一些細節需要注意,例如:$watch 的回調函數會在組件渲染之前執行一次,$watch 可以監聽數組和對象等引用類型的數據,但是需要注意到引用類型數據內部的變化不會觸發回調函數等。