vue中watch的用法

在 Vue.js 中，watch 是一个用于侦听和响应数据变化的选项。它常用于监听组件数据（包括 props 和 data 中的值）的变化，并在值发生变化时执行自定义逻辑。

基本用法

watch 选项接受一个对象，其中键是你想要侦听的变量，值是一个回调函数，在该变量发生变化时执行。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, Watcher!';
    }
  },
  watch: {
    // 监听 message 变量的变化
    message(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    }
  }
};
</script>

在这个例子中，watch 侦听 message 的变化，并在 message 发生变化时打印新值和旧值。

立即执行和深度监听

1. 立即执行 (immediate): 默认情况下，watch 只在数据变化时触发。如果你希望在组件初始化时立即执行一次回调，可以通过 immediate: true 配置。

watch: {
  message: {
    handler(newValue, oldValue) {
      console.log('Message changed:', newValue);
    },
    immediate: true
  }
}

2. 深度监听 (deep): 如果你监听的是一个对象或数组，且希望监听其内部属性的变化，可以使用 deep: true。

watch: {
  obj: {
    handler(newValue, oldValue) {
      console.log('Object changed:', newValue);
    },
    deep: true
  }
}

监听多个数据源

你也可以在一个 watcher 中监听多个数据源，类似于计算属性的 getter。

watch: {
  'person.name'(newValue) {
    console.log('Person name changed:', newValue);
  },
  'person.age'(newValue) {
    console.log('Person age changed:', newValue);
  }
}

侦听计算属性

watch 不仅可以侦听普通数据，还可以侦听计算属性的变化。

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
},
watch: {
  fullName(newValue) {
    console.log('Full name changed to:', newValue);
  }
}

停止 watch

watch 方法还可以在 created 或 mounted 生命周期钩子中手动使用，返回的取消函数可以停止监听：

const unwatch = this.$watch('message', (newValue, oldValue) => {
  console.log('Message changed:', newValue);
});

// 停止监听
unwatch();

总结

watch 用于对数据变化做出反应。适合用于：

• 侦听复杂的逻辑变化
• 监听异步请求的结果
• 处理一些需要精确控制的数据变化响应

它与 computed 的区别在于：computed 是基于依赖进行缓存的属性，而 watch 是对数据变化的副作用处理。