雖然前一回Cue到 計算屬性(Computed)，照理說該它出場了。
但在這之前，先介紹相對好懂的 Watch。
若寫過 AngularJS，應該覺得非常親切。
回想一開始寫網頁，當你希望使用者按下按鈕後，送出 ajax request，你會這麼做吧
<body>
<!-- 註冊了一個 click事件，事件處理器為 sendAjaxRequest -->
<form onsubmit="return false;">
<!-- 欄位腦補 -->
<button type="button" onclick="sendAjaxRequest"></button">
</form>
<scirpt>
function sendAjaxRequest() {
/* do something to send */
alert('request sent.');
}
</scirpt>
</body>
當事件觸發時，瀏覽器叫事件處理器起床幹活。
舉例來講，一個人的姓名變了，全名必定改變
寫起來就像這樣
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
/* 名字變了，幫我改全名 */
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
/* 姓氏變了，幫我改全名 */
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
},
/* 全名變了，幫我昭告天下 */
fullName: function(val, old) {
if (val !== old) {
alert('命理老師說我命中缺__，幫我改名');
}
}
}
})
Vue Watch預設不做深層檢查，當你需要監看的資料不在同一層時，你可以這麼寫
data: {
user: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
},
/* 不論姓名全名改變，請通知我 */
user: {
handler: function (val, oldVal) { alert('user內的資料改變了'); },
deep: true
}
直覺好懂，只是有點囉唆。
得多宣告一組 data 來存資料，資料之間的關聯也散在多個 watcher 內
若是再增加幾個，可能你就不放在眼裡了 ( 因為超過頁面顯示的範圍惹 )
「寶寶覺得眼睛痛，只是寶寶不說」
明天起，計算屬性(Computed) 可以讓寶寶乖乖不哭。
請問這範例當中的val, oldVal是從哪裡來的呢？自定義的嗎？
可以參考官網中有提到 連結
回調函數得到的參數為新值和舊值，這兩個參數都是自訂義的
data: {
user: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
},
watch:{
'user.firstName':function(value){
alter('user的姓氏改變了，改成:'+value)
}
}
補充
若只想watch深層的某個欄位時
可以用這個方法處理
iThome鐵人賽
看影片追技術