vue全家桶进阶之路12：监听器 watch

在Vue2中，监听器（watch）用于监测数据的变化，并在数据变化时执行一些操作。监听器可以用来响应用户输入、观察数据变化、执行异步操作等。

监听器的使用方法如下：

1. 在组件的watch选项中定义一个或多个监听器。

2. 监听器由两部分组成：要监听的数据和数据变化时要执行的回调函数。

3. 监听器的回调函数会在数据变化时被调用。回调函数接收两个参数：新值和旧值。

下面是一个简单的示例，演示如何在Vue2中使用监听器：

<template>
  <div>
    <input v-model="message"> <!-- 绑定输入框到message -->
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      reversedMessage: ''
    }
  },
  watch: {
    message(newVal, oldVal) { // 在watch选项中定义监听器，监听message的变化
      this.reversedMessage = newVal.split('').reverse().join('') // 在回调函数中计算reversedMessage的值
    }
  }
}
</script>

在上面的代码中，我们在组件的watch选项中定义了一个监听器，用于监测message数据的变化。当message的值发生变化时，监听器的回调函数会被调用，从而重新计算reversedMessage的值。

需要注意的是，在使用监听器时，应该避免在回调函数中修改监听的数据，因为这可能会导致无限循环的更新。如果需要修改监听的数据，应该使用计算属性或方法。

<template>
  <div>
    <input v-model="message"> <!-- 绑定输入框到message -->
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    reversedMessage(newVal, oldVal) { // 监听reversedMessage的变化
      this.message = newVal.split('').reverse().join('') // 在回调函数中修改message的值
    }
  }
}
</script>

在上面的代码中，我们在组件的watch选项中定义了一个监听器，用于监测reversedMessage数据的变化。当reversedMessage的值发生变化时，监听器的回调函数会被调用，从而重新计算message的值。

需要注意的是，在回调函数中修改监听的数据会导致无限循环的更新，因为修改数据会再次触发监听器。为了避免这种情况，我们可以使用计算属性来代替直接修改数据。在上面的代码中，我们使用计算属性reversedMessage来计算反转后的字符串，从而避免了在回调函数中直接修改数据的情况。