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