Vue3中输入框值已变更但界面未更新？如何实现输入框联动更新

问题根源：你用ref({})创建了空对象，后续新增的getValue属性没有被Vue的响应式系统追踪到——虽然控制台能打印出正确值，但DOM不会触发更新。

两种可行的解决方法 #

方法1：初始化时声明所有响应式属性 #

提前在ref对象里定义好需要用到的属性，这样Vue会自动追踪这些属性的变化：

<template>
   <input
    v-model="formValues.setValue"
    class="input"
    type="number"
    @input="calcValue"
   >
   <input
    v-model="formValues.getValue"
    class="input"
    type="number"
    readonly
   >
</template>
<script>
import { ref } from 'vue';
export default {
   setup() {
    // 初始化时声明所有需要响应式的属性
    const formValues = ref({
      setValue: '',
      getValue: ''
    });
    const calcValue = () => {
        formValues.value.getValue = formValues.value.setValue * 3;
    };
    return {
      formValues,
      calcValue,
    }
   }
  }
</script>

方法2：改用reactive定义响应式对象 #

reactive专门用于对象/数组的响应式处理，天生支持新增属性的追踪：

<template>
   <input
    v-model="formValues.setValue"
    class="input"
    type="number"
    @input="calcValue"
   >
   <input
    v-model="formValues.getValue"
    class="input"
    type="number"
    readonly
   >
</template>
<script>
import { reactive } from 'vue';
export default {
   setup() {
    const formValues = reactive({});
    const calcValue = () => {
        formValues.getValue = formValues.setValue * 3;
    };
    return {
      formValues,
      calcValue,
    }
   }
  }
</script>

补充说明 #

Vue3中，ref更适合处理基本类型值（如字符串、数字），当用它包裹对象时，内部会通过reactive转换，但空对象后续新增的属性不会被自动纳入响应式系统。而reactive则是为复杂类型量身设计，所有属性（包括新增的）的变化都会被自动追踪。

内容的提问来源于stack exchange，提问作者angel100a