首页vue3中watchEffect与watch的用法

vue3中watchEffect与watch的用法

时间: 2024-12-24 08:10:51 浏览: 47

在Vue 3中，`watch` 和 `watchEffect` 都是用来监听数据变化的工具，但它们之间有一些关键的区别： 1. **watch**： - `watch` 是一种响应式属性，它可以监听一个或多个路径，并在目标值改变时执行提供的函数。它返回一个可以取消订阅（unwatch）的回调函数，用于移除监听。 - 它适用于需要在数据变化时立即执行副作用的情况，如计算、更新DOM等。 - 示例： ```javascript watch(dataKey, (newVal, oldVal) => { console.log('data changed:', newVal); }); ``` 2. **watchEffect**： - `watchEffect` 更加现代化，它是从Composition API引入的，用于观察并管理副作用函数（比如读取数据库、发送网络请求等异步操作）。它返回一个`ref`对象，可以直接通过`.value`获取当前状态，而不需要手动触发回调。 - 异步操作通常放在`effect`中，然后在`watchEffect`中注册这个`effect`，这样当依赖的数据变化时，只会懒惰地执行一次对应的副作用，提高性能。 - 示例： ```javascript 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; } }); ```

阅读全文