02 vue 的計算屬性和偵聽器

1. 偵聽器

watch: {

}

• 文法 / 簡介

new Vue({
	el: "#app",
	data: {
	},
	watch: {
		// 偵聽器
		// 這個選項用來監控目前執行個體中的成員發生變化
		// 監聽方式是給目前執行個體的成員添加一個同名函數在 watch 選項裡邊
		// 這個同名函數有兩個參數，(newValue, oldValue)
		// newValue: 被修改之後的資料
		// oldValue: 被修改之前的資料
	}
})
           

• 簡單示例

data: {
    val: ""
},
watch: {
    val(newValue, oldValue) {
        console.log(newValue, oldValue);
    }
}
           

• 執行個體 ( 輸入框禁止添加數字 )

<h1>{{val}}</h1>
<input type="text" v-model="val">
           

data: {
    val: ""
},
watch: {
    val(newValue, oldValue) {
        // 檢測到如果新值是帶有數字
        if(/\d/g.test(newValue)){
            // 就把沒輸入數字前的舊值賦給 val
            // this.val = oldValue;

            // 或者是在在新值中比對到數字，替換為空，再賦給val
            this.val = newValue.replace(/\d/g,"");
        }
    }
}
           

2. 計算屬性

computed: {

}

methods 選項
當執行個體中的任何屬性 ( data中的成員 ) 有任何改變時，methods中的函數都會觸發運作
模闆通路要加括号：
{{ getValue() }}

computed 選項
當 computed 用到的 data中的屬性更新的時候， computed中的函數才會觸發
模闆通路不要加括号：
{{ getValue }}
           

計算屬性和方法的不同

詳情請見 vue 官網 ‘#計算屬性緩存 vs 方法’ 部分

注意*

data / methods / computed 不能有相同名稱的成員