Vue watch深度監聽的正確開啟方式

2021-09-24 07:33:20 字數 529 閱讀 5998

在大部分日常開發中,我們經常需要使用watch監聽資料變化,但如果想監聽的資料層級比較深,往往結果並不盡如人意,本文介紹兩種深度監聽資料變化的方法

1.借助deep: true深度監聽

watch: ,

// 開啟深度監聽

deep: true

}}複製**

watch監聽物件,同時用**deep: true**深度監聽,此時只有物件中的某個值發生改變就會觸發

2.借助computed計算屬性監聽
// 通過計算屬性,計算出需要監聽的資料

computed:

},// 不通過deep,仍然可以深度監聽計算出來的資料

watch:

}複製**

通過computed計算屬性的配合,先計算出需要監聽的屬性後用watch監聽

從效能以及可讀性考慮,個人比較推薦第二種方式

VUE watch監聽機制

1.watch 監聽機制 針對當前元件中的初始值來進行判斷的,即當進入頁面執行created方法時,就會觸發watch方法。2.watch如何在初始化之後使用 即在created方法執行時,不呼叫watch裡面的監聽邏輯 場景 要求首次進入頁面時,不觸發watch監聽事件改變資料,當頁面載入完成後,...

Vue watch 監聽物件中的屬性

vue 提供了乙個 watch 方法讓使用者監聽 data 內的資料變動,觸發相應的方法 querydata 注 下面 watch 後的函式上都可以拿到 新值和老值 function val,oldval 現在需要監聽這個 querydata,我們可以這樣做 watch deep true 裡面的d...

vue watch如何同時監聽多個屬性

vue watch如何同時監聽多個屬性 最近在做vue的專案,在使用watch監聽屬性的時候發現需要同時監聽三個屬性,作為剛入門的小白,只接觸過監聽乙個屬性,上網查詢了別人的做法後,找到了解決的方案。第一種方法data watch else name2 function val else 這個方法就...