watcheffect
时间: 2024-01-14 21:21:48 浏览: 154
6个用例快速理解vue3的watchEffect用法.pdf
watchEffect是Vue 3中的一个新特性,它用于在响应式数据发生变化时执行副作用代码。watchEffect会自动追踪响应式数据的变化,并在数据变化时立即执行传入的副作用函数。
下面是一个使用watchEffect的示例代码:
```javascript
import { reactive, watchEffect } from 'vue';
const nameObj = reactive({
name: 'John',
});
const stop = watchEffect(() => {
console.log(nameObj.name);
});
// 当nameObj.name发生变化时,控制台会输出新的值
// 取消监听
stop();
```
在上面的代码中,我们使用reactive函数创建了一个响应式对象nameObj,并定义了一个watchEffect函数来监听nameObj.name的变化。当nameObj.name发生变化时,控制台会输出新的值。
需要注意的是,watchEffect函数会立即执行一次副作用函数,并在响应式数据变化时再次执行。如果想要在watchEffect函数内部停止监听,可以调用返回的stop函数。
阅读全文