$watch是Vue的一個常用API,用于監測數據的變化,并在數據變化時執行相應的操作。$watch接收兩個參數:第一個參數是要監測的數據變化的屬性,可以是字符串或者一個函數,第二個參數是一個回調函數,當屬性變化時會被調用。$watch還可以返回一個取消監聽的函數。
下面是一個$watch的示例代碼:
var app = new Vue({ data: { message: 'Hello, Vue!' }, watch: { message: function (newVal, oldVal) { console.log('message的值從' + oldVal + '變成了' + newVal); } } })
上述代碼中,我們定義了一個Vue實例,它有一個data屬性message,初始值為'Hello, Vue!'。我們在watch選項下定義了一個監測函數,當message的值發生變化時,會調用這個函數并將新舊值作為參數傳入。
$watch的使用場景十分廣泛。比如當我們需要監聽一個數組或者一個對象的變化時就可以使用$watch。下面是一個監聽數組變化的示例代碼:
var app = new Vue({ data: { list: ['a', 'b', 'c'] }, watch: { list: function (newVal, oldVal) { console.log('list的值從' + oldVal + '變成了' + newVal); } } }) app.list.push('d');
上述代碼中,我們在Vue實例中定義了一個數組list,并創建了一個$watch來監聽它的變化。在代碼的最后,我們向數組中添加了一個元素,就會觸發$watch中的回調函數。
下一篇dockers3