Vue 3 Composition API：watch 和 watchEffect 的力量

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将介绍 Vue 3 Composition API 中的 watch 和 watchEffect 函数，探讨其在 Vue 组件中的作用和优势，帮助开发者更好地利用 watch 和 watchEffect 进行组件的状态管理。

引言：

随着 Vue 3 的发布，Vue 3 Composition API 成为了一个备受关注的新特性。Composition API 允许开发者以更灵活的方式组织和管理组件的逻辑，其中 watch 和 watchEffect 是 Composition API 中的两个核心函数，用于监听组件的状态变化。watch 和 watchEffect 函数提供了更简洁和强大的方式来管理组件的状态。下面，我们将深入探讨 watch 和 watchEffect 的使用方法和优势。🔍

正文：

一、🌟 watch 和 watchEffect 简介

1. watch：watch 函数用于创建一个响应式状态的监听器。当状态发生变化时，回调函数会被调用。

import { ref, watch } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`count 变化了：${newValue}`);
    });
    return {
      count
    };
  }
};

2. watchEffect：watchEffect 函数用于创建一个响应式状态的监听器。当状态发生变化时，回调函数会被执行。

import { ref, watchEffect } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watchEffect(() => {
      console.log(`count 当前值：${count.value}`);
    });
    return {
      count
    };
  }
};

二、🚀 watch 和 watchEffect 的优势

1. 代码复用：通过 watch 和 watchEffect，开发者可以将可复用的逻辑封装在一起，并在多个组件中复用。
2. 灵活性：watch 和 watchEffect 允许开发者更灵活地组织和管理组件的状态，使得代码更加模块化和易于维护。
3. 可维护性：watch 和 watchEffect 的代码更加清晰和易于维护，因为它将组件的状态分离出来，使得组件的视图和状态分离。

三、🔍 watch 和 watchEffect 的使用方法

1. 定义响应式数据：首先，创建一个 Vue 组件，并定义响应式数据。

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    return {
      count
    };
  }
};

2. 使用 watch 或 watchEffect：在 Vue 组件的 setup 函数中，使用 watch 或 watchEffect 函数来监听状态变化。

import { ref, watch, watchEffect } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`count 变化了：${newValue}`);
    });
    watchEffect(() => {
      console.log(`count 当前值：${count.value}`);
    });
    return {
      count
    };
  }
};

四、🎉 使用 watch 和 watchEffect 的注意事项

1. 避免过度使用：虽然 watch 和 watchEffect 非常有用，但过度使用可能会导致代码难以理解。应根据实际需求合理使用。
2. 遵循最佳实践：在编写 Vue 3 代码时，遵循最佳实践，如使用 watch 和 watchEffect 函数等。

总结：

watch 和 watchEffect 是 Vue 3 Composition API 中的两个核心函数，用于监听组件的状态变化。通过合理使用 watch 和 watchEffect，我们可以构建更加灵活和可维护的组件。掌握 watch 和 watchEffect 的使用方法，将有助于开发者提高开发效率和代码质量。🚀

参考资料：

1. Vue 官方文档 - watch 和 watchEffect