vue3 复杂监听实例
时间: 2023-09-18 16:10:37 浏览: 35
在 Vue3 中,可以使用 `watch` API 来监听数据的变化,这个 API 支持监听多个属性,并且可以设置深度监听。
以下是一个示例,演示了如何监听一个对象中的多个属性以及如何设置深度监听:
```js
import { reactive, watch } from 'vue'
const state = reactive({
user: {
name: 'John',
age: 30,
address: {
city: 'New York',
country: 'USA'
}
},
posts: [
{
title: 'Post 1',
content: 'Content 1'
},
{
title: 'Post 2',
content: 'Content 2'
}
]
})
watch([() => state.user.name, () => state.user.age, () => state.user.address], (newValues, oldValues) => {
console.log('User data changed:', newValues, oldValues)
}, { deep: true })
watch(() => state.posts, (newPosts, oldPosts) => {
console.log('Posts data changed:', newPosts, oldPosts)
})
```
在上面的代码中,我们使用了 `reactive` 函数将一个普通的对象变成了一个响应式对象。然后,我们使用了 `watch` API 来监听 `user` 对象中的多个属性,以及 `posts` 数组的变化。在第一个 `watch` 中,我们设置了 `deep` 选项为 `true`,以便深度监听 `user` 对象中的属性。当任何一个被监听的属性发生变化时,回调函数都会被调用。
需要注意的是,使用 `watch` API 监听响应式数据的变化是一个重要的性能优化点。如果你需要监听的数据非常复杂或者数据量很大,那么建议不要监听整个数据对象,而是只监听必要的属性,或者通过分割数据结构来减少监听的数据量。否则,会导致性能问题。