vue3中watchEffect用法

Vue3中的watchEffect可以监测响应式数据并立即运行传入的回调函数。它会自动追踪使用的响应式数据，并在其变化时重新运行回调函数。例如：

watchEffect(() => {
console.log(state.count)
})

这将在state.count变化时立即打印出新的值。

好了，说一个笑话吧：为什么程序员总是喜欢喝咖啡？因为Java！

相关问题

vue3中watchEffect

在Vue 3中，watchEffect是一个新的API，它用于在响应式数据发生变化时执行副作用代码。它与Vue 2.x中的watch方法相比具有更简洁的语法。

watchEffect接收一个函数作为参数，该函数包含要观察的响应式数据的引用。当观察的数据发生变化时，该函数将被立即执行，并且在执行期间会自动追踪引用的响应式数据。这意味着，如果在函数内部访问了响应式数据，当该数据发生变化时，函数将被重新执行。

下面是一个使用watchEffect的示例：

import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log(state.count)
})

// 改变count的值，将会触发watchEffect回调函数
state.count++

在上面的例子中，我们创建了一个reactive对象state，它包含一个名为count的属性。然后，我们使用watchEffect来监视count属性，并在count发生变化时输出其值。当我们对count进行自增操作时，watchEffect的回调函数将被触发。

vue3中watchEffect与watch的用法

在Vue 3中，`watch` 和 `watchEffect` 都是用来监听数据变化的工具，但它们之间有一些关键的区别：

1. **watch**：
- `watch` 是一种响应式属性，它可以监听一个或多个路径，并在目标值改变时执行提供的函数。它返回一个可以取消订阅（unwatch）的回调函数，用于移除监听。
- 它适用于需要在数据变化时立即执行副作用的情况，如计算、更新DOM等。
- 示例：

     watch(dataKey, (newVal, oldVal) => {
       console.log('data changed:', newVal);
     });

2. **watchEffect**：
- `watchEffect` 更加现代化，它是从Composition API引入的，用于观察并管理副作用函数（比如读取数据库、发送网络请求等异步操作）。它返回一个`ref`对象，可以直接通过`.value`获取当前状态，而不需要手动触发回调。
- 异步操作通常放在`effect`中，然后在`watchEffect`中注册这个`effect`，这样当依赖的数据变化时，只会懒惰地执行一次对应的副作用，提高性能。
- 示例：

     import { ref, watchEffect } from 'vue';
     const fetchData = async () => {/* fetch data */};
     const loading = ref(false);

     watchEffect(() => {
       if (/* data needs to be fetched */) {
         loading.value = true;
         await fetchData();
         loading.value = false;
       }
     });