Vue3中v-model数值计算需刷新浏览器才生效的问题求助

问题背景 #

我正在学习Laravel 9 + Vue 3 + axios的CRUD开发，当前实现基于v-model的数值计算功能：num1与num2求和得到sum1，sum1已能正常保存到数据库。但打开数值输入页面后，输入num1和num2时sum1无法自动显示，刷新浏览器后计算功能才恢复正常。

原Create.vue代码 #

<input type="number" name="num1" id="num1" v-model="form.num1">
{{ form.num1.toLocaleString() }}

<input type="number" name="num2" id="num2" v-model="form.num2">
{{ form.num2.toLocaleString() }}

{{ form.num1 + form.num2 }}
<input type="number" name="sum1" id="sum1" class="" v-model="form.sum1" >


<script setup>
import { computed, reactive } from "vue";
import useCompanies from "@/composables/companies";

const form = reactive({
    'num1': '',
    'num2': '', 
    'sum1': '', 
})
const sum1 = computed(() => {
    return form.sum1 = form.num1 + form.num2
})

const { errors, storeCompany } = useCompanies()
const saveCompany = async () => {
    await storeCompany({ ...form });
}
</script>

问题根源 #

• 初始值类型错误：form.num1和form.num2初始值为字符串''，输入框绑定字符串类型时，数值相加会变成字符串拼接（比如输入1和2得到"12"而非3），导致计算逻辑异常，页面初始化时无法触发正确的响应式更新。
• computed用法违规：在computed函数内部直接修改form.sum1，违背了computed作为"纯计算属性"的设计初衷——computed应仅负责推导值，而非修改其他响应式变量，这种写法会导致响应式依赖追踪混乱，页面初始化时computed可能未被正确触发。
• 响应式绑定断层：模板中form.sum1未与computed属性sum1建立有效绑定，输入值变化时无法触发sum1的实时计算更新。

修复后的代码 #

<script setup>
import { computed, reactive, ref } from "vue";
import useCompanies from "@/composables/companies";

// 用ref声明数值类型响应式变量，初始值设为0确保数值计算正常
const num1 = ref(0);
const num2 = ref(0);

// 纯计算属性，仅推导sum1的值，不修改其他变量
const sum1 = computed(() => num1.value + num2.value);

// 表单对象关联响应式变量与计算属性，用于提交到后端
const form = reactive({    
    num1: num1,
    num2: num2,
    sum1: sum1, 
})    

const { errors, storeCompany } = useCompanies()
const saveCompany = async () => {
    // 提交时传入计算属性的实际值
    await storeCompany({ 
        num1: num1.value,
        num2: num2.value,
        sum1: sum1.value
    });
}
</script>

<template>
    <!-- 绑定ref变量，v-model.number确保输入值自动转为数值 -->
    <input type="number" name="num1" id="num1" v-model.number="num1">
    {{ num1.toLocaleString() }}

    <input type="number" name="num2" id="num2" v-model.number="num2">
    {{ num2.toLocaleString() }}

    {{ sum1 }}
    <!-- 绑定计算属性作为输入框值，设为readonly避免手动修改 -->
    <input type="number" name="sum1" id="sum1" class="" :value="sum1" readonly>
</template>

关键修复点 #

• 用ref(0)声明数值类型响应式变量，配合v-model.number确保输入值始终为数值，避免字符串拼接问题。
• 让computed回归纯计算角色，仅负责推导sum1的值，确保响应式依赖追踪正常。
• 模板中直接绑定computed属性sum1，确保输入值变化时sum1实时更新。

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