watch vue用法

在 JavaScript 中，watch 是 Vue.js 中的一个概念，用于监听数据的变化。如果你是在谈论 Vue.js 的 watch，那么它是用来观察一个或多个响应式数据的变化，并在数据变化时执行某些操作。

Vue.js 中的 watch

watch 是 Vue.js 提供的一种监听器，用于响应数据变化。在 Vue 中，响应式数据的变化会触发组件的重新渲染，而 watch 则允许你对这些变化做出反应，并执行自定义逻辑。

基本用法：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from "${oldValue}" to "${newValue}"`);
    }
  }
});

在这个示例中，我们使用 watch 来监听 message 数据的变化。每当 message 发生变化时，watch 中的函数就会被调用，并且你可以通过 newValue 和 oldValue 访问变化前后的值。

watch 的特性

1.异步执行：watch 的回调默认是异步执行的。也就是说，回调会在 DOM 更新之后执行，这样可以避免同步更新导致的性能问题。
2.深度监听：如果你想监听对象或数组的深层次变化，可以使用 deep: true 来实现。

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

3.立即触发：通过设置 immediate: true，可以在页面加载时立即触发 watch 的回调，而不是等待数据首次变化。

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

Vue 3 中的 watch（Composition API）：

在 Vue 3 中，watch 是 Composition API 的一部分，用于监听响应式状态的变化。

import { ref, watch } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');
    
    watch(message, (newValue, oldValue) => {
      console.log(`Message changed from "${oldValue}" to "${newValue}"`);
    });
    
    return { message };
  }
};

何时使用 watch：

当你需要对数据变化做出反应时，使用 watch 是非常合适的。
例如：表单输入、路由变化、或异步请求（当某个数据变化时触发异步操作）。

总结：

watch 用于监听数据的变化并在数据变化时执行自定义代码。
它对于处理数据变化后的副作用（如触发 API 请求、更新外部状态等）非常有用。
Vue 2 和 Vue 3 中的使用方式略有不同，但核心概念相似。