在Vue的watch中,除了可以監聽一個具體的數據對象的變化,還可以監聽一個具體的方法的變化。我們可以通過設置watch的第二個參數deep,來實現監聽對象中任意深度的變化。除此之外,在Vue的watch中,還可以設置immediate參數,當該屬性為true時,在監聽對象被添加到watch中之后,watch將會立即被調用一次,而不需要等待到監聽對象的變化才會被觸發。
watch: { obj: { deep: true, immediate: true, handler(newValue, oldValue) { // do something ... } } }
除了上述的高級用法之外,在Vue的watch中,還可以結合Vue的計算屬性來進行高級使用。我們可以在計算屬性中深度監聽被依賴的數據對象的變化,然后通過Vue的watch來實現計算屬性的監聽。當被依賴的數據對象改變時,計算屬性會被重新計算,并且Vue的watch也會被重新調用。
computed: { total() { return this.items.reduce((sum, item) =>sum + item.price * item.quantity, 0); } }, watch: { items: { immediate: true, deep: true, handler(newValue, oldValue) { this.total(); } } }
在Vue的watch中,我們還可以監聽一個數組的變化。我們可以設置數組的deep屬性為true,來監聽數組元素的變化,也可以設置數組的handler屬性,在特定條件下進行手動觸發watch。當監聽數組的變化時,我們還可以使用Vue提供的幾個數組方法,來實現特定用例的需求。
watch: { 'array': { deep: true, handler(newValue, oldValue) { // do something ... } } }, methods: { pushItem() { this.array.push({name: 'new item'}); }, popItem() { this.array.pop(); }, spliceItem() { this.array.splice(0, 1); } }
總之,在Vue的watch中還有很多高級用法,這里只是列舉了其中的幾種。當開發中遇到復雜的需求時,我們可以靈活使用Vue的watch,來滿足我們的開發需求。