watchEffect函数怎么用

watchEffect函数是Vue 3中的一个API，用于监听数据的变化并执行副作用回调函数。它的使用方法如下所示：

1. 在Vue组件中，首先引入watchEffect函数：

import { watchEffect } from 'vue';

2. 在`<script setup>`标签内，创建响应式数据对象：

const msg = reactive({
  name: '张三',
  age: 18,
  girlFriend: { person: '小红', age: 16 }
});

3. 使用watchEffect函数来监听数据的变化并执行副作用回调函数：

watchEffect(() => {
  console.log(msg.name);
});

在上述代码中，我们传入了一个回调函数给watchEffect，该回调函数会在msg.name发生变化时被执行。在这个回调函数中，我们可以执行任何副作用操作，比如打印、更新UI等。

总结起来，watchEffect函数可以用于监听响应式数据的变化并执行相应的副作用回调函数，而无需明确指定侦听的数据源，它会自动追踪所有使用到的响应式属性。这使得代码更为简洁和方便。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue3.0中的watchEffect()如何使用](https://blog.csdn.net/weixin_44162077/article/details/128543591)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]