1 监视属性¶
监视属性是一种用于监视某个数据的变化，并触发相应的回调函数执行的机制。在vue内部，使用“wathch”关键字用于声明监视属性。
1.1 基本用法¶
(1)添加watch属性，值为一个对象。对象的属性名就是要监视的数据，属性值为回调函数，每当这个属性名对应的值发生变化，就会触发该回调函数执行
(2)回调函数有2个参数：
newVal：数据发生改变后的值
oldVal：数据发生改变前的值
例如，我们定义一个变量num，在页面中添加一个按钮，每点击一次按钮，num的值加1，另外，每次在num的值发生改变时，控制台输出提示。
<!-- 准备好一个容器-->
<div id="root">
<h2>num的值为：{{num}}</h2>
<button @click="changeNum">点击num+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
num: 0
},
methods: {
changeNum(){
this.num = this.num + 1
}
},
watch:{
num(newVal, oldVal){ // newVal为修改后的值， oldVal为修改前的值
console.log('num的值发生了变化')
console.log(newVal,oldVal)
}
}
})
</script>
1.2 监听对象内部属性的变化¶
前面的例子只是监听data中的第一层数据，如果要监听多层次的数据，例如a.b.c，则属性名需要用引号包裹起来.
<div id="root">
<h2>a的值为：{{num.a}}</h2>
<h2>num的值为：{{num}}</h2>
<button @click="changeA">点击a+1</button>
<button @click="changeNum">修改num</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
num: {
a: 0,
b: 0
}
},
methods: {
changeA(){
this.num.a = this.num.a + 1
},
changeNum(){
this.num = {a:100, b:200}
}
},
watch:{
"num.a"(newVal, oldVal){ // 注意：此时，因为a是对象内部变量，所以a必须用“num.a”的方式用双引号包裹
console.log('a的值发生了变化')
console.log(newVal,oldVal)
},
num(newVal, oldVal){ // newVal为修改后的值， oldVal为修改前的值
console.log('num的值发生了变化')
console.log(newVal,oldVal)
}
}
})
</script>
如下图所示，第一次点击“点击a+1”按钮，a的值加了1，控制台输出了两行；第一次点击“修改num”按钮，因为a的值也同时发生改变，所以a的监视属性也触发，因为num完整修改了，所以，num的监视属性也修改了。所以会有4行输出结果在控制台。
1.3 深度监听¶
监视属性只能监听到当前对象值的变化，而对象内部的属性变化不会监听到，前面1.2节我们监听了num和num.a，修改了num.a并不会触发监听num的监听属性。 想要监听对象内部的属性值变化，需要进行相应的配置。
-
deep:深度监听，默认false，当对象内部深层属性变量发生修改时，是否触发
-
handler:回调函数
-
immediate: 页面初始化时是否触发回调，默认false
如下所示，我们只监听num对象，但修改num对象内部的变量a时，num的监听属性也被触发，这就是深度监听的作用：
<div id="root">
<h2>a的值为：{{num.a}}</h2>
<button @click="changeA">点击a+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
num: {
a: 0,
b: 0
}
},
methods: {
changeA(){
this.num.a = this.num.a + 1 // 注意：此处修改的是a的值，而不是整个num
}
},
watch:{
num: { // 监听num对象
deep: true, // 深度监听
handler:function(newVal,oldVal){ // 监听属性的回调方法
console.log('num的值发生了变化')
console.log(this.num.a, this.num.b)
},
immediate:true // 页面初始化时是否触发回调
}
}
})
</script>
点击一次按钮，控制台输出两次，第一次是因为imediate设置为了true，当页面初始化时，会自动出发一次num的监视属性，第一次是点击按钮触发。
1.4 监视属性的简写¶
在1.3节说到，监视属性有三种属性，即deep、imediate、handler，当deep和imediate两个属性不需要使用（使用默认值时），可以使用简写形式，下方代码中，被注释的完整形式和简写形式作用是一样的：
<div id="root">
<h2>a的值为：{{num}}</h2>
<button @click="changeNum">点击a+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
num: 0
},
methods: {
changeNum(){
this.num = this.num + 1 // 注意：此处修改的是a的值，而不是整个num
}
},
watch:{
// 完整写法
// num: { // 监听num对象
// deep: false, // 深度监听
// immediate:false,
// handler:function(newVal,oldVal){ // 监听属性的回调方法
// console.log('num的值发生了变化')
// console.log(newVal,oldVal)
// },
// }
// 简写形式
num(newVal,oldVal){
console.log('num的值发生了变化')
console.log(newVal,oldVal)
}
}
})
</script>
1.5 创建监视属性的另一种方式¶
监视属性也可以在创建完vue实例之后再添加：
<div id="root">
<h2>a的值为：{{num}}</h2>
<button @click="changeNum">点击a+1</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
num: 0
},
methods: {
changeNum(){
this.num = this.num + 1 // 注意：此处修改的是a的值，而不是整个num
}
},
})
// 为num添加监视属性
vm.$watch('num',{ // 指定监视num
immediate:true, //初始化时让handler调用一下
handler(newValue,oldValue){
console.log('num被修改了',newValue,oldValue)
}
})
</script>
2 计算属性与监视属性的对比¶
- 计算属性能完成的功能，监视属性都能完成
- 监视属性能完成的部分功能，计算属性不一定能完成，例如涉及异步操作的功能
- 如果两者都能完成的功能，建议使用计算属性，效率更高
如下所示，连个输入框分别双向绑定两个变量：num1和num2，在输入框下方输出两个变量的和，要求无论哪个变量发生修改，延迟3秒后，再求和并输出。因为涉及的延迟输出，计算属性就不能完成了，这时候要使用监视属性：
<div id="root">
num1：<input type="text" v-model="num1"> <br/><br/>
num2：<input type="text" v-model="num2"> <br/><br/>
sum：<span>{{sum}}</span> <br/><br/>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
num1: 0,
num2: 0,
sum: 0
},
watch:{
num1(val){
setTimeout(()=>{
console.log(this)
this.sum = parseInt(this.num1) + parseInt(this.num2)
},3000);
},
num1(val){
setTimeout(()=>{
console.log(this)
this.sum = parseInt(this.num1) + parseInt(this.num2)
},3000);
},
}
})
</script>