侦听器是vue提供的一个简便通用的响应数据变化的方法。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的 。
a(newVal,oldVal){
}要监听的变量名称:{
handler(){
}
},
// 其中handler是固定的配置选项，不能改变它的名称普通监听只能监听到基本数据类型的变化，例如：number、boolean、string
用代码实现一个普通监听：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
{{total}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0,
total:0
},
watch: {
a(newVal, oldVal){
// console.log(newVal, oldVal, '这是watch');
this.total = this.a + this.b;
},
b(){
this.total = this.a + this.b;
}
},
methods:{}
})
</script>
</body>
</html>当被监听的内容是引用数据类型时，watch里面msg（）{ } 这种形式只是普通的浅监听，无法满足我们的需求，因此我们需要使用深度监听来实现对数组/对象里的值进行监听。给监听器添加一个deep属性，默认值是false，当我们将其设置为true时深度监听生效。
用代码实现一个深度监听：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
</head>
<body>
<div id="app">
<input type="number" v-model="a">
<input type="number" v-model="b">
<input type="text" v-model="obj.name">
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0,
total:0,
obj:{
name:"zzy",
age:17
}
},
watch: {
// 普通监听
// 基本数据类型
a(){
console.log('a被改变了');
},
b:{
// 被监听的变量除了可以写成函数，还可以是一个对象
// handler是固定的配置选项，不能改变它的名称
// 有两个参数，一个是新的数据，一个是旧的数据、
handler(){
console.log('b被改变了');
}
},
// watch里面a(){}这种形式只是浅监听，只适合监听一层，
// 如果想监听对象或者数组内部的值，这种形式就不适合了，
// 这个时候需要深度监听，deep属性，它的默认值是false
// 引用数据类型
obj:{
// console.log('obj被改变了');
handler(newVal,oldVal){
console.log(newVal.name,oldVal.name);
},
deep:true
}
},
methods:{}
})
</script>
</body>
</html>当实现了深度监听时，obj对象中的属性值也会随着我们的操作而发生变化。
注意：
computed与watch的区别：