1、在vue中watch用来监听数据的变化，一旦发生变化可以执行一些其他操作
它的值包括的选项对象有:
- handler: 其值是一个回调函数, 即监听到变化时应该执行的函数
- deep: 其值是true或false, 确认是否深入监听.(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以监听到)
- immediate: 其值是true或false,确认是否以当前的初始值执行handler的函数.
2、watch就是当值第一次绑定的时候，是不会执行监听函数的，只有值发生改变才会执行。
如果需要在第一次绑定的时候也执行函数，则需要用到immediate属性
3、handler方法：
immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化时才执行
使用场景:
- 不加immediate:true; 在tab切换时,你已经选中了2-1,当你刷新页面时,选项会回到默认位置1-1
- 加immediate:true;在tab切换时,你已经选中了2-1,当你刷新页面时,选项仍在2-1的位置
watch: {
$route: {
// 监听路由参数
handler(){
const {classify} = this.$route.query;
if(classify){
this.classifyName = classify[0]; //一级和二级的绑定
this.classifyType = classify;
this.getMenus();
}
},
immediate:true, //立即执行
}
},
4、deep
当需要监听一个对象的变化时，普通的watch方法无法监听到对象内部属性的变化，只有data中的数据才能够监听到变化，此时需要deep属性进行深度监听，设置deep：true，当对象的属性较多时，每个属性的变化都会执行handler
5、可以只监听对象的其中一个属性值
如下：
watch: {
'person.name': {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
deep: true,
immediate: true
}
}
6、watch中不要使用箭头函数
即不要用箭头函数来定义watcher函数，因为箭头函数中的this是指向当前作用域，对于箭头函数来说，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象
7、监听方式
- 普通数据类型：
<input type="text" v-model="userName"/>
//监听 当userName值发生变化时触发
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true
}
}
缺点：
只有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，只有当值改变的时候 才会执行
如果我们想在第一次绑定的时候执行此监听函数 则需要 设置 ** immediate为true**
2.对象类型: 当需要监听对象的改变时，此时就需要设置deep为true
<input type="text" v-model="cityName.name" />
data (){
return {
cityName: {name:'北京'}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
//注意点：如果对象的属性较多，可以监听某一个属性'cityName.name'
watch: {
'cityName.name': {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
deep: true,
immediate: true
}
}
3.数组类型: 数组的变化不需要深度监听
8、watch和computed的区别
- computed的get必须有返回值（return），而watch中return可有可无
- computed支持缓存，只有依赖的数据发生改变，才会重新进行计算，而watch不支持缓存，数据发生改变，会直接触发相应的操作
- computed可以自定义名称，而watch只能监听和data里面名称相同的属性
- computed适用于复杂的运算，而watch适合一些消耗性功能，比如Ajax
- computed不支持异步，当computed内有异步操作是无效的，无法监听数据的变化，而watch支持异步
- computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值，而watch监听的函数接受两个参数，第一个是最新的值，第二个是输入之前的值
- 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，多对一或者一对一，一般用computed，当一个属性发生变化时，需要执行对应的操作，一对多，一般用watch
