vue3watch深度监听的写法
时间: 2023-06-21 07:08:14 浏览: 100
在 Vue 3 中,你可以使用 `watch` 函数来实现深度监听。下面是一个简单的例子:
```javascript
import { ref, watch } from 'vue'
const data = ref({
message: 'Hello Vue 3!',
nested: {
value: 0
}
})
watch(data, (newVal, oldVal) => {
console.log('Data changed!', newVal, oldVal)
}, { deep: true })
// 修改嵌套属性
data.value.nested.value = 1 // 输出: Data changed! { message: 'Hello Vue 3!', nested: { value: 1 } } { message: 'Hello Vue 3!', nested: { value: 0 } }
// 修改对象属性
data.value.message = 'Hello World!' // 输出: Data changed! { message: 'Hello World!', nested: { value: 1 } } { message: 'Hello Vue 3!', nested: { value: 1 } }
```
在上面的例子中,我们使用 `watch` 函数来监听 `data` 的变化。当 `data` 中的属性发生变化时,回调函数会被触发。我们设置了 `deep` 选项为 `true`,以启用深度监听。这样,当 `data` 中的嵌套属性或子属性发生变化时,也会触发回调函数。
需要注意的是,Vue 3 中的 `watch` 函数返回一个 `stop` 函数,可以用于停止监听。例如:
```javascript
const stop = watch(data, (newVal, oldVal) => {
console.log('Data changed!', newVal, oldVal)
}, { deep: true })
// 停止监听
stop()
```
阅读全文