在使用 v-model 双向绑定时，若需让某个标签（如 `
在 Vue 应用中，v-model 本质上是 :value 和 @input 的语法糖，它会自动同步视图与数据——这意味着只要 product.upc 发生变化，所有引用它的插值表达式（如 {{ product.upc }}）都会立即更新。因此，若希望 <label> 始终显示“原始 UPC 值”，而输入框可自由编辑 product.upc，就不能让两者共用同一个响应式字段。
推荐解决方案：分离显示与编辑状态
在组件 data 中声明一个独立的只读字段（如 upcLabel），并在组件挂载时（mounted）将其初始化为 product.upc 的当前值：
data() {
return {
product: {
upc: '123456789012'
},
upcLabel: '' // 用于静态显示的副本
}
},
mounted() {
this.upcLabel = this.product.upc
}模板中分别使用：
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text p-0">{{ upcLabel }}</label>
</div>
<input
type="text"
class="form-control text-center"
v-model="product.upc"
>
</div>✅ 优势说明：
- upcLabel 是普通字符串，非响应式引用，不会随 product.upc 变化；
- mounted 钩子确保初始赋值发生在数据就绪后，避免 undefined；
- 若需支持动态重置（如点击“恢复原始值”按钮），可额外封装方法：
methods: { resetUPC() { this.product.upc = this.upcLabel } }
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要使用 computed 或 watch 来“冻结”值——它们仍依赖响应式源，无法真正隔离变更；
- 若 product 来自父组件 prop，应在 created 或 mounted 中基于 this.$props.product.upc 初始化 upcLabel，并考虑监听 prop 变化以更新静态标签（按需）；
- 在 Vue 3 Composition API 中，可用 ref() 创建独立引用，并在 onMounted 中赋值，逻辑一致。
此模式清晰区分了「展示意图」与「编辑意图」，是构建可控表单 UI 的基础实践。
