vue2watch监听写法

在Vue 2中，你可以使用`watch`选项来监听数据的变化。下面是一个示例代码，展示了如何使用`watch`监听数据的变化：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated Message';
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed:', newValue, oldValue);
    }
  }
};
</script>

在这个示例中，我们定义了一个`message`属性，并在模板中显示它的值。当点击"Update Message"按钮时，`updateMessage`方法会将`message`属性的值更新为"Updated Message"。

同时，我们在组件的`watch`选项中定义了一个名为`message`的监听器。当`message`属性的值发生变化时，监听器中的回调函数会被触发，并且传入新的值和旧的值作为参数。

在实际应用中，你可以根据需要定义多个监听器来监视不同的属性或数据。