vue3 setup中watch用法
时间: 2024-03-18 16:12:46 浏览: 12
在 Vue 3 的 Composition API 中,可以使用 `watch` 函数来监听响应式数据的变化。`watch` 函数有两个参数:要监听的数据和回调函数。
下面是一个使用 `watch` 的示例代码:
```javascript
import { watch, ref } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count 变化了,新值为 ${newValue},旧值为 ${oldValue}`);
});
return {
count
};
}
}
```
在上面的例子中,我们定义了一个名为 `count` 的响应式数据,并使用 `watch` 函数来监听它的变化。当 `count` 的值发生变化时,回调函数会被触发,并且会传入新值和旧值作为参数。
需要注意的是,在 Vue 3 的 Composition API 中,`watch` 函数的第一个参数可以是一个响应式数据,也可以是一个返回响应式数据的函数。这使得我们可以更加灵活地监听多个数据的变化。
此外,`watch` 函数还可以接收第三个参数,用于配置更多选项,例如设置是否立即执行回调函数等。具体的用法可以参考 Vue 3 的官方文档。
相关问题
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监听多个对象用法
可以用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的变化了。