vue watch监听的使用

1.概念

• 没有缓存，数据变化，触发相应操作
• 支持异步操作
• 接收两个参数，第一个是最新的值，第二个是旧的值
• 监听的数据是data中声明过父组件传递过来的prop中的值，还可以监听路由$route
• immediate：组件加载立即触发回调函数的执行（为false时，只有监听的数据变化回调函数才会执行）
• deep：深度监听，一般用来监听对象。

2.使用

普通使用：

//html部分
<template>
  <div>
    <p v-model="msg"></p>
  </div>
</template>

//js部分
props:['children']
data() {
    return {
      msg:'',
    };
  },
watch:{
	//监听data中数据
	msg(newV,oldV){
		console.log(newV,oldV)
	},
	//监听props中的
	children(newV,oldV){
		console.log(newV,oldV)
	},
	//监听vuex中的数据
	"$store.state.userInfo": function(newValue, oldValue) {
      ...
    }
    //监听路由
    "$route":"routeChange"   //routeChange方法,路由变化执行改方法
}

深度监听（deep）

deep:true 会把obj下面的属性层层遍历，性能开销较大。也可以直接 浅监听obj.msg

//html部分
<template>
  <div>
    <p v-model="obj.msg"></p>
  </div>
</template>
//js部分
data() {
    return {
      obj:{
       msg:'',
      }
    };
 },
watch:{
	obj:{
		handler(newV,oldV){
			console.log(newV,oldV)
		},
		deep:true,
		immediate:true
	}
}

3.注意事项

watch在某些情况下无法监听数组的变化

• 通过下标修改数组数据
• 通过arr.length改变数组长度

其他方案：

1. 通过 Vue 实例方法 set 进行设置 $set( target, propertyName/index, value);
   this.$set(this.arr,0,99);//将arr数组的第0项设置为99
   this.$set(this.obj,'msg','hello');//将obj对象的msg属性设置为'hello'


2.通过 $delete( target, propertyName/index )
  this.$delete(this.arr,0)//删除数组第0项
  this.$delete(this.obj,'msg') //删除对象的msg属性