Vue3学习总结-watchEffect属性！响应式数据的守护者！

🌟 Vue3进阶指南：WatchEffect，响应式数据的守护者 🌟

Hey小伙伴们，Vue3中引入了一个全新的响应式API——watchEffect，它能帮我们在数据变化时自动执行副作用，无需手动管理watchers。今天，我们就来聊聊watchEffect的妙用，并通过一个实战案例来深入了解它的强大之处！🚀

---

📊 WatchEffect：数据变化的自动响应者

在Vue3中，watchEffect是一个函数，它接受一个函数作为参数，这个函数会在依赖的数据发生变化时自动执行。相比于传统的watch，watchEffect更简洁，更易于理解和维护，特别是在处理复杂的数据依赖关系时。

---

🎯 案例解析：实时计算BMI

想象一下，你正在开发一个健康应用，其中有一个功能是实时计算用户的BMI（身体质量指数）。这个计算需要根据用户的体重和身高实时更新。watchEffect正是解决这个问题的理想工具。

✒️代码示例：

<template>
  <div>
    <label>Weight (kg): </label>
    <input v-model.number="weight" type="number" />
    <br />
    <label>Height (m): </label>
    <input v-model.number="height" type="number" />
    <br />
    <p>Your BMI: {{ bmi }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const weight = ref(70);
    const height = ref(1.75);
    const bmi = ref(0);

    // 使用watchEffect监控weight和height的变化
    watchEffect(() => {
      if (height.value > 0) {
        bmi.value = weight.value / (height.value * height.value);
      } else {
        bmi.value = 0;
      }
    });

    return {
      weight,
      height,
      bmi
    };
  }
};
</script>

🎯解析时刻：

在这个例子中，我们使用ref来创建响应式的weight和height变量。然后，我们使用watchEffect来监听这两个变量的变化。每当weight或height的值发生变化时，watchEffect内的函数会被自动执行，重新计算BMI的值。这样，用户在输入框中输入体重和身高时，BMI的计算结果会实时更新，无需任何额外的操作。

---

🎉实战演练：WatchEffect的进阶用法

除了基本的使用方式，watchEffect还支持一些高级选项，如flush参数，可以控制副作用函数的执行时机。尝试在watchEffect中加入flush: 'post'，观察其对数据更新的影响。

watchEffect({
  effect() {
    // ...
  },
  flush: 'post'
});

---

📚总结：WatchEffect的魔法

学会了watchEffect，你就掌握了Vue3中响应式数据处理的秘籍。它不仅能让代码更简洁，还能提高应用的响应性和用户体验。下次在编写Vue应用时，记得用watchEffect来自动响应数据变化，让你的代码更加优雅和高效！

WatchEffect的官方定义是立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

• watch对比watchEffect

  1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

  2. watch：要明确指出监视的数据

  3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）

🏷️ #Vue3实战 #WatchEffect #实时计算 #BMI应用

---

✨ Keep coding, stay curious! ✨

---

如果你喜欢我的文章，请关注我，点赞并收藏，我会带来更多有趣、有用的编程知识和经验分享！🚀

---

🏷️ #编程学习 #前端开发 #Vue3技巧