vue实现watch

在 Vue 中实现 watch 监听数据变化

Vue 的 watch 功能用于监听数据变化并执行相应的回调函数。可以通过选项式 API 或组合式 API 实现。

选项式 API 中的 watch

在选项式 API 中，watch 是一个对象，键是需要监听的属性名，值是对应的回调函数或配置对象。

export default {
  data() {
    return {
      count: 0,
      user: {
        name: 'Alice',
        age: 25
      }
    }
  },
  watch: {
    // 监听基本数据类型
    count(newVal, oldVal) {
      console.log(`count 从 ${oldVal} 变为 ${newVal}`);
    },
    // 监听对象属性
    'user.name'(newVal, oldVal) {
      console.log(`user.name 从 ${oldVal} 变为 ${newVal}`);
    },
    // 使用配置对象
    user: {
      handler(newVal, oldVal) {
        console.log('user 对象变化', newVal, oldVal);
      },
      deep: true, // 深度监听
      immediate: true // 立即执行
    }
  }
}

组合式 API 中的 watch

在组合式 API 中，watch 是一个函数，可以监听单个或多个数据源。

import { ref, watch, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const user = reactive({
      name: 'Alice',
      age: 25
    });

    // 监听 ref
    watch(count, (newVal, oldVal) => {
      console.log(`count 从 ${oldVal} 变为 ${newVal}`);
    });

    // 监听 reactive 对象的属性
    watch(
      () => user.name,
      (newVal, oldVal) => {
        console.log(`user.name 从 ${oldVal} 变为 ${newVal}`);
      }
    );

    // 监听多个数据源
    watch(
      [() => user.name, count],
      ([newName, newCount], [oldName, oldCount]) => {
        console.log('多个数据变化', newName, newCount);
      }
    );

    // 深度监听和立即执行
    watch(
      () => user,
      (newVal, oldVal) => {
        console.log('user 对象变化', newVal, oldVal);
      },
      { deep: true, immediate: true }
    );

    return { count, user };
  }
}

watchEffect 的使用

watchEffect 是组合式 API 中的另一种监听方式，它会立即执行一次，并自动追踪其依赖。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log('count 的值是:', count.value);
    });

    return { count };
  }
}

停止监听

在组合式 API 中，watch 和 watchEffect 会返回一个停止监听的函数。

const stop = watch(count, (newVal) => {
  console.log('count 变化:', newVal);
});

// 停止监听
stop();

性能注意事项

• 避免过度使用 deep，深度监听会增加性能开销。
• 对于大型对象或数组，考虑监听特定属性而非整个对象。
• 在组件卸载时，手动停止不需要的监听以避免内存泄漏。

通过以上方法，可以在 Vue 中灵活地监听数据变化并执行相应逻辑。