vue3的setup中watch监听多个对象用法
时间: 2024-05-06 22:21:23 浏览: 8
可以用ES6的解构语法将多个对象解构到一个响应式对象中,然后在setup函数中使用watchEffect来监听这个响应式对象的变化。例如:
```
import { reactive, watchEffect } from 'vue';
export default {
setup() {
const state = reactive({
foo: 'foo',
bar: 'bar'
});
watchEffect(() => {
console.log('foo:', state.foo);
console.log('bar:', state.bar);
});
return {
state
}
}
}
```
这样就可以同时监听state.foo和state.bar的变化了。
相关问题
vue3 setup watch 监听对象
在Vue 3的setup函数中,可以通过watch函数来监听对象的变化。具体的使用方法如下:
```javascript
import { watch, reactive } from 'vue'
setup() {
const obj = reactive({ count: 0 })
watch(() => obj.count, (newValue, oldValue) => {
console.log(`count is: ${newValue}`)
})
return {
obj
}
}
```
以上代码中,我们使用reactive函数将一个对象转换为响应式对象。然后使用watch函数来监听obj.count属性的变化,并在回调函数中处理变化后的值。在回调函数中,第一个参数是新的属性值newValue,第二个参数是旧的属性值oldValue。通过这种方式,我们可以在watch监听对象的属性。
vue3 setup语法糖watch深度监听对象
在Vue 3中,可以使用`watch`函数来进行深度监听对象的变化。下面是一个示例代码:
```javascript
import { watch } from "vue"
setup() {
const brand = reactive({
brand: "Apple",
price: 1000
})
watch(() => brand, (newVal) => {
console.log(newVal)
}, { deep: true })
return {
brand
}
}
```
在上面的代码中,我们使用`reactive`函数创建了一个响应式的`brand`对象。然后,我们使用`watch`函数来监听`brand`对象的变化,并在变化时打印出新的值。通过设置`deep: true`选项,我们可以实现对整个对象的深度监听。
需要注意的是,在Vue 3中,`watch`函数是在`setup`函数中使用的,而不是在组件选项中。这是因为Vue 3中引入了`Composition API`,通过`setup`函数来组织组件的逻辑。