---

前言

最近做项目的时候遇到了需要用watch监听多个值的问题。

一、用watch监听多个值

有时候我们开发需要使用watch监听多个值，那么如何实现呢？
假设一个应用场景，确认密码：一般我们修改密码的时候需要先输入自己定义的新密码，然后再输入一遍用于确认密码，确认按钮在默认状态下为不可用，在两个输入框的输入均不为空的情况下为可用状态。这种场景非常适合使用watch监听两个输入框的输入值，但是我们如何做到监听两个值的操作呢？

1.基本代码

节选部分关键的代码：

// 这里和下面的都只是部分代码，不是所有的哈
<div class="rePassword-ipt" v-for="(item, index) in state.passwordInfo" :key="index">
            <span class="rePassword-ipt-icon" :class="item.icon"></span>
            <input v-model="item.password" type="text" class="rePassword-ipt-val" :placeholder="item.text">
</div>
...
<el-button type="primary" class="rePassword-btns-elbtn" :disabled="state.isReSet"
                @click="checkPassword(state.passValues)">确认重置
</el-button>

在setup中：

import { reactive } from "@vue/reactivity";
import { computed, watch } from "@vue/runtime-core";
...
// 此处的state相当于Vue2中的data:
const state = reactive({
    passwordInfo: [
        //第一次输入的密码;
        { password: '', text: '请输入不包括空格的由8-16位数字和字母组成的密码', icon: 'iconfont icon-mimasuo' },
        { password: '', text: '请确认密码', icon: 'iconfont icon-mima' }//确认之前输入的密码;
    ],
    isReSet: true,//默认按钮是无法使用;
    /**使用计算属性 
    *通过一个回调函数获取passwordInfo中的password值;
    *Vue3的简化写法，非常实用。
    */
    passValues: computed(() => arrPass()),
})
/** 通过map方法遍历数组对象passwordInfo，
*取出其中的password返回到一个新的数组中来。
*/
const arrPass = (): string[] => {
    let arrVals = state.passwordInfo.map((item) => {
        return item.password;
    });
    // 返回password的数组:
    return arrVals;
}

展示效果：

2.监听数据

刚刚我们在state中把两个输入的密码用一个computed方法集中到一个数组当中，那么接下来我们就可以通过监听这个passValues数组来达到同时监听两个值的效果了；

/**
 * 监听表单数据，若两个表单的数据都不为
 * 空且满足需要则将isReset置为false，
 * 则重置按钮可以使用:
 * 监听的回调函数参数的参数分别代表更改后与更改前的值
 */
watch(() => state.passValues, ([newV, newEV], [oldV, oldEV]) => {
    if (newV !== '' && newEV !== '') {
        state.isReSet = false;
    } else {
        state.isReSet = true;
    }
})

那么此时我们把两个输入框都输入值，发现此时可以让重置按钮恢复到可用状态：

总结

上面只是一个基本的案例，通过将多个值转集中到数组来进行监听可以实现监听多个值的效果，当然方法不唯一，欢迎小伙伴们一起来交流学习。