Vue2 Watch监听

在Vue2中，我们可以使用watch来监听一个数据的变化，并且在数据变化时执行一些操作。这个特性是Vue2非常强大的一个功能，可以帮助我们监控一个或多个数据的变化，然后做出相应的反应。

watch语法

要使用watch，我们需要在Vue组件的选项中声明一个watch对象，如下：

复制代码
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newCount, oldCount) {
      console.log(`count变成了${newCount}，之前是${oldCount}`)
    }
  }
}

watch对象的每个属性都是一个键值对，其中键表示要监听的数据的名称，而值则是一个函数。这个函数的参数包含两个值：新值和旧值，在数据发生变化时被触发。

实时响应

watch监听器能够很好地与Vue的响应式系统融合，使得我们在数据发生变化时可以及时地进行响应。例如，当用户输入一些文本时，我们可以通过watch来监听输入框的value，然后在用户输入时实时更新一些状态：

复制代码
<input v-model="inputValue" />
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newValue, oldValue) {
      console.log(`输入框的值从${oldValue}变为了${newValue}`)
    }
  }
}

深度监听

在Vue2中，我们可以通过prop对象中的deep属性来进行深度监听。这个属性默认为false，表示不进行深度监听。如果我们需要监听对象或数组中的变化，那么就需要将这个属性设置为true。

示例：

复制代码
export default {
  props: {
    obj: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    obj: {
      deep: true,
      handler(newObj, oldObj) {
        console.log('obj发生了变化')
      }
    }
  }
}

取消watch监听

在开发过程中，有时我们需要取消watch监听器。我们可以使用$watch方法来手动添加watch监听器，并且可以从组件实例中移除它。这个方法的第一个参数是要监听的数据的名称，而第二个参数则表示要执行的回调函数。

示例：

复制代码
export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    this.stopWatch = this.$watch('count', (newCount, oldCount) => {
      console.log(`count变成了${newCount}，之前是${oldCount}`)
    })
  },
  methods: {
    stopWatching() {
      this.stopWatch()
    }
  }
}

在上面的示例中，我们在组件创建时通过$watch方法添加了一个watch监听器，并将它保存到了stopWatch变量中。当我们需要取消这个监听器时，我们只需要调用这个变量即可。

总结

通过watch监听器，我们可以实时监控数据的变化，并且在数据发生改变时进行相应的操作。我们还可以使用$watch方法手动添加监听器，以及从组件实例中移除它。这是Vue2非常强大的一个功能，可以帮助我们更好地管理和维护数据。