VUE3 如何设置监听一个数值,当这个数值发生变化时,执行某些操作
时间: 2024-03-23 11:39:29 浏览: 30
在 Vue3 中,可以使用 `watch` 函数来设置监听某个数据的变化。具体步骤如下:
1. 在组件的 `setup` 函数中,使用 `ref` 函数定义一个响应式的变量,例如:`const count = ref(0);`
2. 使用 `watch` 函数监听这个变量的变化,例如:`watch(count, (newValue, oldValue) => { console.log('count变化了', newValue, oldValue); });`
3. 当 `count` 变量的值发生变化时,就会执行上述监听函数中的操作。
完整的示例代码如下:
```
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script>
import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log('count变化了', newValue, oldValue);
});
function increment() {
count.value++;
}
return {
count,
increment,
};
},
};
</script>
```
相关推荐
![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)