vue3中使用watch监听
时间: 2024-07-30 22:01:35 浏览: 54
在Vue 3中,`watch` 是一种响应式的数据观测机制,它允许你在数据变化时执行自定义的函数。与之前的版本相比,Vue 3引入了更简洁的 API,并将 `watch` 功能重构为了 `setup` 函数中的 `watchEffect`。
`watch` 的基本语法如下:
```javascript
import { watch } from 'vue'
export default {
setup() {
// 监听 data 中的某个属性 changes
const currentValue = ref(0);
let called = false;
// 使用 watch 创建回调函数
watch(currentValue, (newVal) => {
if (!called) {
console.log('值改变了:', newVal)
called = true;
}
}, {
immediate: true, // 马上执行一次,而不是等到第一次改变发生后再执行
deep: true, // 是否深度监听嵌套的对象或数组
handler: (newVal, oldVal) => {/* 新旧值处理 */}
});
return {
currentValue,
};
},
}
```
在 `setup` 函数中,你可以使用 `watchEffect` 替换 `watch`,这提供了更多的控制选项,如立即执行、延迟执行等。记得在完成监听后,确保在组件卸载前取消订阅以避免内存泄漏。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)