在使用 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>

✅ 优势说明：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

• 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 的基础实践。