Vue观察对象的子属性变化，wacth的deep使用

我们都已经知道，如何观察一个属性值的变化，然后做相应的操作。比如我有一个属性name，我希望在name改变的时候，弹出消息框。

代码如下：

<template>
  <div id="app">
    <input v-model="name"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      name:""
    }
  },
  watch:{
    // 观察的属性名
    name(value){
      alert("现在的name是："+value)
    }
  }
}
</script>

显示效果

 

那么我现在观察的不再是name这个属性，而是person对象里面的name呢？我们这个观察又应该怎么做呢？是不是我们将name改成person就可以了呢？

我们先来试试

<template>
  <div id="app">
    姓名：<input v-model="person.name"/><br>
    年龄：<input v-model="person.age"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      // 由单个属性变成了一个对象
      person:{
        name:"",
        age:""
      }
    }
  },
  watch:{
    // 如果还是按照原来的思路，这里应该是换成person就可以了
    // 观察的属性名
    person(value){
      alert("我的name是："+value.name)
      alert("我的age是："+value.age)
    }
  }
}
</script>

答案显然是不行的，我两个属性都输入了，都没有触发消息弹出

 

好了，回到正题，关键在于watch里面，应该是这么写：

  watch:{
    // 观察的属性名
    person:{
      handler(value){
        alert("我的name是："+value.name)
        alert("我的age是："+value.age)
      },
      deep:true
    }
  }

其中，deep:true是关键，在Vue的文档中有说明：为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

另外一个关键是 handler，根据参考的文章所说，watch 方法在编译的时候，会写成handler方法，反正我们当前这么写就对了。

我们现在再来看看效果如何：

输入了name：

输入age：

目前，无论是name还是age，只要是person下面的属性被修改了，都会被观察到。

完整代码：

<template>
  <div id="app">
    姓名：<input v-model="person.name"/><br>
    年龄：<input v-model="person.age"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      // 由单个属性变成了一个对象
      person:{
        name:"",
        age:""
      }
    }
  },
  watch:{
    // 观察的属性名
    person:{
      handler(value){
        alert("我的name是："+value.name)
        alert("我的age是："+value.age)
      },
      deep:true
    }
  }
}
</script>

 

对于deep的用法，在API里面也有例子，只可惜目前我还是太渣渣，看了还是不会用。

后来是参考了文章：Vue.js中 watch 的高级用法，才知道是怎么用的。

参考地址：https://blog.csdn.net/wandoumm/article/details/80259908