vue watch （深度监听）data多层属性

vue watch （深度监听）data多层属性

当我们的data属性是有两层以上的时候，我们写watch监听内层属性的变化，普通watch就会报错。
假设我们的代码如下：

<div>
      <p>FullName: {{name.fullName}}</p>
      <p>FirstName: <input type="text" v-model="name.firstName"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    name:{
    	firstName: '张',
	    lastName: '三',
	    fullName: ''
    }
  },
  watch: {
    name.firstName(newName, oldName) {//此处会报错
      this.name.fullName = newName + ' ' + this.name.lastName;
    }
  } 

我们使用深度监听优化之后

<div>
      <p>FullName: {{name.fullName}}</p>
      <p>FirstName: <input type="text" v-model="name.firstName"></p>
</div>
 
new Vue({
  el: '#root',
  data: {
    name:{
    	firstName: '张',
	    lastName: '三',
	    fullName: ''
    }
  },
  watch: {
    name: {
    	handler(newName, oldName){//name属性内部属性发生变化之后，会先执行handler方法
      		this.name.fullName = newName.firstName + ' ' + this.name.lastName;
      	},
    	immediate: true//深度监听不许添加这个属性
    }
  }