vue3watch监听
时间: 2023-09-08 08:15:16 浏览: 47
Vue 3 中的 `watch` API 在使用上有所不同,它被称为 `watchEffect`。与 Vue 2 中的 `watch` 不同,`watchEffect` 没有需要监听的属性,它会自动追踪被使用的响应式数据,并在数据变化时重新运行。下面是一个简单的例子:
```javascript
import { watchEffect, reactive } from 'vue'
const state = reactive({
count: 0
})
watchEffect(() => {
console.log(state.count)
})
```
在上面的例子中,我们使用 `reactive` 创建了一个响应式对象 `state`,然后使用 `watchEffect` 监听了 `state.count` 的变化。当 `state.count` 发生变化时,`watchEffect` 中的函数就会重新运行。
如果你需要在特定属性发生变化时运行一些逻辑,可以使用 `watch` 函数。与 Vue 2 中的 `watch` 不同,Vue 3 的 `watch` 函数需要传入两个参数:需要监听的属性和回调函数。下面是一个例子:
```javascript
import { watch, reactive } from 'vue'
const state = reactive({
count: 0
})
watch(() => state.count, (newVal, oldVal) => {
console.log(`count 从 ${oldVal} 变为 ${newVal}`)
})
```
在上面的例子中,我们使用 `watch` 函数监听了 `state.count` 的变化,并在变化时输出了变化前后的值。请注意,`watch` 函数的第一个参数是一个函数,这个函数返回需要监听的属性。在这里,我们直接返回了 `state.count`。如果你需要监听多个属性,你可以在这个函数中返回一个数组,数组中包含需要监听的属性。