在Vue中,watch選項用于監聽數據的變化,實現數據變化時自動執行一些操作。默認情況下,watch只會監聽數據引用的變化,如果數據中的某個屬性值發生變化不會觸發watch的監聽。解決這個問題的方法是使用deep選項,以監聽對象或數組內部屬性值的變化。
watch: { obj: { deep: true, handler: function (val, oldVal) { console.log('obj changed'); } } }
在上面的代碼中,我們定義了一個watch監聽obj對象的變化,并設置deep為true。當obj內部屬性值發生變化時,會觸發watch的handler函數。
除了deep選項之外,還可以使用immediate選項來指定在組件初始化時立即執行watch的handler函數。
watch: { obj: { deep: true, immediate: true, handler: function (val, oldVal) { console.log('obj changed'); } } }
當immediate設置為true時,watch選項在組件初始化時會立即執行一次handler函數。
需要注意的是,deep選項會引起性能問題,因為它監聽了對象或數組內部屬性值的變化,所以需要避免同時監聽多個深層次的對象或數組。
另外,如果要監聽數組的變化,可以使用Vue提供的專用方法。例如,可以使用push方法監聽數組的添加元素操作。
watch: { arr: { handler: function (val, oldVal) { console.log('arr changed'); }, deep: true } }, methods: { addElement: function () { this.arr.push('new element'); } }
在上面的代碼中,我們定義了一個watch監聽arr數組的變化,并使用push方法添加元素。由于監聽了數組的變化,當使用push方法添加元素時會觸發watch的handler函數。
最后需要注意的是,deep選項只能監聽對象內部屬性的變化,不能監聽非引用類型的數據類型(如boolean、string、number等)的變化。