【vue3|第10期】Vue3中watchEffect详解

news2024/12/26 10:48:25

日期：2024年6月10日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

文章目录

一、前言
二、watchEffect 是什么？
三、如何定义和使用 watchEffect？
四、在什么场景下使用 watchEffect？
五、总结

在这里插入图片描述

一、前言

在 Vue.js 中，数据的变化会引起视图的更新，这是通过响应式系统来实现的。而 watchEffect 就是 Vue.js 响应式系统的一部分，它可以帮助我们追踪到数据的变化，并在数据变化时执行一些操作。

二、watchEffect 是什么？

watchEffect 是 Vue.js 3.0 引入的一个新特性，它是一个即时、响应式的 API，用于监视和响应组件中的变化。与 computed 和 watch 选项不同，watchEffect 不需要你显式地声明要观察的属性，它会默认观察你的函数中用到的所有响应式数据。

三、如何定义和使用 watchEffect？

要使用 watchEffect，首先确保你已经安装了 Vue.js 3.0。接下来，在你的组件中导入 watchEffect：

import { watchEffect } from 'vue';

现在你可以定义一个 watchEffect：

watchEffect(() => {
  // 在这里编写你的副作用函数
});

在这个副作用函数中，你可以访问和操作组件中的响应式数据。当这些数据发生变化时，watchEffect 会自动重新运行副作用函数。

例如，假设我们有一个计数器组件，我们可以使用 watchEffect 来观察和响应 count 的变化：

<template>
  <div>
    <button @click="increment">增加</button>
    <p>计数器： {{ count }}</p>
  </div>
</template>

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

// 定义响应式数据
const count = ref(0);

// watchEffect观察函数中用到的所有响应式数据,如count.value
watchEffect(() => {
  console.log('count 变化了：', count.value);
});

function increment() {
  count.value++;
}
</script>

在这个例子中，每当 count 发生变化时，watchEffect 会重新运行副作用函数，并在控制台输出新的 count 值。

四、在什么场景下使用 watchEffect？

当需要在组件初始化或数据变化时执行一些异步操作，如发送网络请求。
用于自动处理一些与数据相关的界面更新。
监控多个相关数据的变化并进行统一的处理。

五、总结

watchEffect 是 Vue.js 中的一个重要功能，它可以帮助你在数据变化时执行一些操作。通过使用 watchEffect ，你可以更好地控制响应式系统中的副作用，提高代码的可维护性和可读性。希望这篇博客对你有所帮助，如果你有任何问题，欢迎在评论区留言。

参考文章：