如何在vue3使用watch
时间: 2024-05-24 11:09:00 浏览: 16
在Vue 3中使用watch的方法如下:
1. 在setup函数中使用watchEffect
```javascript
import { watchEffect } from 'vue'
export default {
setup() {
const count = ref(0)
watchEffect(() => {
console.log(count.value)
})
return { count }
}
}
```
2. 使用watch API
```javascript
import { watch } from 'vue'
export default {
setup() {
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log(newVal, oldVal)
})
return { count }
}
}
```
注意,watchEffect可以监听任何响应式数据的变化,而watch API需要传入一个要监听的响应式数据。如果要监听多个响应式数据的变化,可以使用watch API的数组语法。例如:
```javascript
watch([count1, count2], ([newCount1, newCount2], [oldCount1, oldCount2]) => {
console.log(newCount1, newCount2, oldCount1, oldCount2)
})
```
相关推荐
![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)