一、watch的API

vm.$watch( expOrFn, callback, [options] )

• 參數：

  • {string | Function} expOrFn
  • {Function | Object} callback
  • {Object} [options]
    • {boolean} deep
    • {boolean} immediate

• 返回值：{Function} unwatch

• 用法：

  觀察 Vue 實例變化的一個表達式或計算屬性函數?；卣{函數得到的參數為新值和舊值。表達式只接受監督的鍵路徑。對于更復雜的表達式，用一個函數取代。

• 注意：在變異 (不是替換) 對象或數組時，舊值將與新值相同，因為它們的引用指向同一個對象/數組。Vue 不會保留變異之前值的副本。

• 示例：

?

// 鍵路徑 vm.$watch('a.b.c', function (newVal, oldVal) {// 做點什么 })// 函數 vm.$watch(function () {return this.a + this.b},function (newVal, oldVal) {// 做點什么} ) var unwatch = vm.$watch('a', cb) // 之后取消觀察 unwatch()

• vm.$watch?返回一個取消觀察函數，用來停止觸發回調：

• 選項：deep

  為了發現對象內部值的變化，可以在選項參數中指定?deep: true?。注意監聽數組的變動不需要這么做。

vm.$watch('someObject', callback, {deep: true }) vm.someObject.nestedValue = 123 // callback is fired

• 選項：immediate

  在選項參數中指定?immediate: true?將立即以表達式的當前值觸發回調：

vm.$watch('a', callback, { immediate: true}) // 立即以 `a` 的當前值觸發回調

?

二、watch的定義

?

（1）監聽data的變量的值變化

{data: function(){return {key:{a:'b'}}},watch: {key(newval, oldVal) {}} }

（2）監聽data的變量的屬性值變化

A.字符串形式

{data: function(){return {key:{a:'b'}}},watch: {'key.a'(newval, oldVal) {}} }

B.computed模式

{data: function(){return {key:{a:'b'}}},computed: {a() {return this.key.a}}, watch:{a(newValue, oldValue) {}} }

（3）監聽vue的data的變量的變化（包括屬性值的變化）

{data: function(){return {key:{a:'b'}}},watch: {key: {handler(newValue, oldValue) {},deep: true}} }

（4）監聽vue的data的變量值變化（立即觸發）

{data: function(){return {key:{a:'b'}}},watch: {key: {handler(newValue, oldValue) {},immediate: true}} }

?

注意：在watch的監聽對象或者監聽對象的屬性上使用lamda表達式賦值，this指向的不是Vue的實例對象，而是Vue的原始對象。

參考：

https://cn.vuejs.org/v2/api/#vm-options

https://blog.csdn.net/Claire_cz/article/details/79098237

?

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue watch监听对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。