vue3watch监听多个变量

<template>
  <div>
    <input v-model="firstName" placeholder="First Name">
    <input v-model="lastName" placeholder="Last Name">
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const firstName = ref('');
    const lastName = ref('');

    // 计算属性，用于组合 firstName 和 lastName
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    // 监听多个变量的变化
    watch([firstName, lastName], (newValues, oldValues) => {
      console.log('New first name:', newValues[0]);
      console.log('New last name:', newValues[1]);
      console.log('Old first name:', oldValues[0]);
      console.log('Old last name:', oldValues[1]);
    });

    return {
      firstName,
      lastName,
      fullName
    };
  }
};
</script>

解释说明

1. 模板部分:

   • 使用了两个 input 元素分别绑定到 firstName 和 lastName。
   • 显示了一个段落元素，内容为 fullName。

2. 脚本部分:

   • 使用 ref 创建了两个响应式变量 firstName 和 lastName。
   • 使用 computed 创建了一个计算属性 fullName，它会根据 firstName 和 lastName 的值自动更新。
   • 使用 watch 监听 firstName 和 lastName 的变化。当任何一个变量发生变化时，回调函数会被触发，并传入新的值和旧的值。

3. 监听多个变量:

   • watch 函数的第一个参数是一个数组，包含要监听的多个变量（这里是 firstName 和 lastName）。
   • 回调函数接收两个参数：一个是新值数组，另一个是旧值数组。通过索引可以访问对应的值。

这样就可以实现对多个变量的同时监听，并在它们发生变化时执行相应的逻辑。