vue watch关于对象内的属性监听

Vue.js 是一款轻量级的MVVM框架，提供了非常方便的API用于响应用户操作，其中watch就是其中非常重要的一部分，用于实现数据的监听，从而对数据的变化做出响应。

当需要监听对象内部属性时，可以使用深度监听，即使用deep:true选项，Vue会递归地监听对象以及对象内的所有属性变化。下面提供两个示例说明。

示例1

在模板中有一个输入框和一个按钮，当按钮被点击时，数据会变化：

<template>
  <div>
    <input v-model="userInfo.name" />
    <button @click="changeName">修改名称</button>
  </div>
</template>

在Vue 实例中，可以通过watch来监听对象内部的属性：

export default {
  data() {
    return {
      userInfo: {
        name: 'Jack',
        age: 18,
      },
    };
  },
  watch: {
    userInfo: {
      deep: true,
      handler(value, oldValue) {
        console.log('userInfo changed', value, oldValue);
      },
   },
  },
  methods: {
    changeName() {
      this.userInfo.name = 'Tom';
    },
  },
};

当输入框中的值发生改变时，watch中的handler函数将被调用，控制台中会打印出如下的结果：

userInfo changed {name: "Tom", age: 18} {name: "Jack", age: 18}

示例2

在模板中有一个计数器，当计数器的值改变时，会触发watch：

<template>
  <div>
    <h3>{{ count }}</h3>
      <button @click="increment">递增</button>
  </div>
</template>

在Vue实例中，我们可以定义一个未被初始化的空对象，然后通过watch来监听该对象内部属性的变化：

export default {
  data() {
    return {
      count: 0,
      user: {},
    };
  },
  watch: {
    user: {
      deep: true,
      handler(value, oldValue) {
        console.log('user changed', value, oldValue);
      },
    },
  },
  methods: {
    increment() {
      this.count++;
      this.user = {
        name: 'Tom',
        age: 18,
      };
    },
  },
};

当点击按钮递增计数器时，同时给用户信息赋值，watch中的handler函数将会被调用，控制台中会打印出如下的结果：

user changed {name: "Tom", age: 18} {}

从上面两个示例可以看出，当需要监听对象内部属性时，使用watch结合“深度监听”Option可以非常方便的实现。