vue中watch的使用探索

vue中watch的使用探索

在项目中，经常有需要根据一个值的变化，来相应的更新另一个值的状态。vue给我们提供了一个很好用的watch方法，可以方便监控，watch并不完美，需要具体了解一下。

new Vue({
	el:"#root",
	data:{
		name:"Jedi",
		message:{
			age:25,
			job:"doctor",
		},
		phoneList:['xiaomi','huawei','oppo'],
	},
	watch:{
		name(newValue,oldValue){
			.....
		},
	}
})

对于字符串 数字等简单的类型，可以入以上形式直接监听，当每次发生变化时，进行相对应的操作。watch有一个特点，最初绑定的时候不会执行，如果想要在绑定的时候就执行操作，则需要通过handler方法和immediate属性配合

watch:{
		name:{
			handler(newValue,oldValue){
				......
			},
			immediate:true
		},
	}

immediate:true表述在watch中声明name后立即执行相应的操作。
当我们通过watch监听对象message和数组phoneList，有时会遇到数据改变了，但watch没有相应。这是因为Js的限制，Vue不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值：

mounted: {
  this.message= {
    address: '北京市朝阳区xxxx'
  }
}

这时 watch才能监听到，进行相应操作。

如果要强制监听，那么就需要用到deep属性。

watch: {
  message: {
    handler(newName, oldName) {
      .....
    },
    immediate: true,
    deep: true
  }
} 

deep:true表述深入观察，watch进行监听的时候，会是按层级遍历，将每一个属性都添加到监听器中，这样任何属性变化，都会触发相应操作。在工作，考虑到性能方面，如果一个对象又很多的属性，一一监听会造成很大的开销。那么我们可以针对性的只监听其中一个属性，例如

watch: {
  "message.job": {
    handler(newName, oldName) {
      .....
    },
    immediate: true,
    deep: true
  }
} 

这种写法的结果就是，watch会按层级，找到job属性，指给它设置监听，进行相应操作。