如何在 Vue 3 脚本设置中观察多个值？答案

【问题标题】：How to watch for multiple values in Vue 3 script setup?如何在 Vue 3 脚本设置中观察多个值？
【发布时间】：2023-02-17 18:51:16
【问题描述】：

我有这个观察者（在<script setup>里面：

const form = reactive({
    body: '',
    image: ''
})

watch(() => form.image, () => {
    console.log(form.image)
})

我想扩展以观看两个反应对象：

watch(() => (form.image, form.body), () => {
    console.log(form)
})

但这现在只能观看form.body。我一直在尝试实现this question's answer，但它似乎无法像我的观察者那样使用新旧值。当两个值都更新时，我希望观察者触发。

【问题讨论】：

标签： javascript vue.js events vuejs3 watch

【解决方案1】：

我想通了。当两个值都为真时，它将触发。你可以把你自己的条件放在那里。

const form = reactive({
    body: '',
    image: ''
})

watch(() => [form.image, form.body], () => {
    if (form.image && form.body) {
        console.log(form)
    }
})

【讨论】：

【解决方案2】：

如果你需要多个观察者，你需要每次都调用 watch ：

watch(() => form.image, () => {
    console.log(form.image)
})
watch(() => form.body, () => {
    console.log(form.body)
})

如果您需要一个观察者来观察两者，那么：

watch([() => form.image, () => form.body], 
([newImage, newBody], [prevImage, prevBody]) => {
    console.log(form.body, form.image)
})

如果我们以该答案为例：来自您链接的问题的https://stackoverflow.com/a/45853349/8126784

【讨论】：