一、watch的API

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

• 參數(shù)：

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

• 返回值：{Function} unwatch

• 用法：

  觀察 Vue 實(shí)例變化的一個(gè)表達(dá)式或計(jì)算屬性函數(shù)。回調(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受監(jiān)督的鍵路徑。對(duì)于更復(fù)雜的表達(dá)式，用一個(gè)函數(shù)取代。

• 注意：在變異 (不是替換) 對(duì)象或數(shù)組時(shí)，舊值將與新值相同，因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組。Vue 不會(huì)保留變異之前值的副本。

• 示例：

?

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

• vm.$watch?返回一個(gè)取消觀察函數(shù)，用來(lái)停止觸發(fā)回調(diào)：

• 選項(xiàng)：deep

  為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，可以在選項(xiàng)參數(shù)中指定?deep: true?。注意監(jiān)聽數(shù)組的變動(dòng)不需要這么做。

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

• 選項(xiàng)：immediate

  在選項(xiàng)參數(shù)中指定?immediate: true?將立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)：

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

?

二、watch的定義

?

（1）監(jiān)聽data的變量的值變化

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

（2）監(jiān)聽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）監(jiān)聽vue的data的變量的變化（包括屬性值的變化）

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

（4）監(jiān)聽vue的data的變量值變化（立即觸發(fā)）

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

?

注意：在watch的監(jiān)聽對(duì)象或者監(jiān)聽對(duì)象的屬性上使用lamda表達(dá)式賦值，this指向的不是Vue的實(shí)例對(duì)象，而是Vue的原始對(duì)象。

參考：

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

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

?

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue watch监听对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。