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

2021-09-11 16:30:16 字數 520 閱讀 7689

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

最近在做vue的專案,在使用watch監聽屬性的時候發現需要同時監聽三個屬性,作為剛入門的小白,只接觸過監聽乙個屬性,上網查詢了別人的做法後,找到了解決的方案。

第一種方法

data () 

}, watch: else

},'name2': function (val) else

}}

這個方法就是分開下來單獨監聽每個屬性,只要name1或name2改變了,都會執行相應的方法,但是這樣寫的話重複的**很多,這顯然是不想看見的

第二種方法

data () 

},computed: = this

return }},

watch: else

}}

如果不能直接監聽多個屬性的話,我們可以換個想法,先將多個屬性放在乙個物件中,直接監聽這個物件就可以了,這時候返回的val將會列印出你輸入的name1,name2的內容,可以同時監聽到這兩個屬性

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深度監聽的正確開啟方式

在大部分日常開發中,我們經常需要使用watch監聽資料變化,但如果想監聽的資料層級比較深,往往結果並不盡如人意,本文介紹兩種深度監聽資料變化的方法 1.借助deep true深度監聽watch 開啟深度監聽 deep true 複製 watch監聽物件,同時用 deep true 深度監聽,此時只有...