02 vue 的計算屬性和偵聽器

1. 偵聽器

watch: {
}

• 語法 / 簡介

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

• 簡單示例

<input type="text" v-model="val">

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 不能有相同名稱的成員