vue 使用watch監聽注意點

2021-09-29 03:04:45 字數 1329 閱讀 6116

1.1 watch 監聽不到 obejct物件的變化

在專案中,當我們需要監聽乙個物件的改變時,普通的watch方法無法監聽到物件內部屬性的改變,只有data中的資料才能夠監聽到變化,此時就需要deep屬性對物件進行深度監聽。

解決方法:此時可以設定監聽物件的deep:ture。來實現監聽到物件屬性的變化

例子:

new vue(}},

watch: ,

deep: true,}}

})

問題:在上面的例子中,雖然我們可以通過設定deep:true。來監聽物件的變化,但如果我們為物件新增或者刪除屬性,watch是監聽不到的
原因: 因為es5的影響,watch 不能監聽到物件屬性的新增或刪除。

解決方法:

1通過vue的this.$set(object, key, value)方法

2通過object.assign()重新建立乙個物件, 例如this.ob= object.assign({}, this.ob, )

例子:

通過$set

通過object.assign

data ()

}

} methods: ,

byobjectassign() , this.p, )

} },

watch: ,

deep: true

}}

通過設定deep:true,可以監聽物件屬性的變化,但是如果修改了這個物件中的任何乙個屬性,都會執行handler這個方法,不過這樣加大了頁面效能的消耗,那怎樣解決呢?

解決方法:1使用watch監聽字串的物件屬性

2使用計算屬性computed

例子:

watch: ,

}}

computed:

}watch: ,

}}

我們知道,可以通過設定deep:true來設定物件屬性的變化,或者陣列物件的變化。但是如果是陣列物件呢?還是使用deep:true嗎?這樣子,watch會監聽陣列所有屬性的變化,這樣**無疑加大了頁面效能的消耗, *那有什麼方法可以監聽陣列物件某乙個屬性的變化呢?嘿嘿,答案肯定是有的。

解決方法:

通過vue的computed。watch監聽computed的返回值,進行watch監聽

例子:

new vue(,

],}),

computed:

},watch:

}}) *

vue使用watch監聽拿到props的傳值

第一種情況 export default floordata1 floordata2 props floordata watch script 在floordata傳值成功的前提下,有時候會出現直接在 watch 裡面通過 this.floordata 是無法拿到的,總是顯示 undefined。然...

vue監聽watch的過程

vue提供了watch來監聽雙向繫結過程中data的變化。watch 監聽某個值 雙向繫結 的變化,一旦發生變化,就呼叫引號裡的方法,從而達到change事件監聽的效果!如果只是監聽obj內的乙個屬性變化,可以直接使用obj.key進行監聽。watch 如果對整個obj深層監聽,就會用到deep w...

vue的watch監聽函式

在vue中,使用watch來響應資料的變化。watch的用法大致有三種。下面 是watch的一種簡單的用法 1.new vue methods watch 也可以直接寫乙個監聽處理函式,當每次監聽到 cityname 值發生改變時,執行函式。也可以在所監聽的資料後面直接加字串形式的方法名 watch...