vue3 watch实时监听
时间: 2024-08-17 17:02:30 浏览: 80
解决Vue2.0 watch对象属性变化监听不到的问题
5星 · 资源好评率100%
在Vue 3中,`watch`是用于监听响应式数据变化的一个功能,它可以捕捉到数据的变化并执行相应的副作用函数。Vue 3的`watch`功能比Vue 2更加灵活和强大,它可以监听单个数据源,也可以监听多个数据源,并且支持返回值清理和立即执行等特性。
以下是一个使用`watch`监听响应式数据的简单示例:
```javascript
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`当前计数为: ${newValue}`);
});
```
在这个例子中,`count`是一个响应式的引用(ref),我们使用`watch`来监听它的变化。当`count`的值发生变化时,`watch`的回调函数会被调用,并且会接收到新的值和旧的值作为参数。
`watch`还支持监听多个响应式数据源,例如:
```javascript
watch([count, anotherRef], ([newCount, newAnother], [oldCount, oldAnother]) => {
console.log(`计数和另一个值分别更新为:${newCount} 和 ${newAnother}`);
});
```
`watch`提供了更多的选项,比如配置`immediate`来让监听器立即执行,或者配置`deep`来深度监听嵌套对象的变化。
阅读全文