如何在 Vue 中保持标签内容静态不变，同时允许输入框双向绑定更新数据

当使用 v-model 绑定输入框时，模板中所有引用同一响应式数据（如 product.upc）的地方都会实时更新；若需在标签中固定显示初始值而不随输入变化，应将该初始值单独保存为独立的非响应式或仅初始化一次的数据字段。

在 Vue 项目中，v-model 实现的是双向数据绑定——一旦 product.upc 被修改，所有插值表达式（如 {{ product.upc }}）和依赖它的计算属性、指令都将同步更新。因此，直接在 中渲染 product.upc 无法实现“静态显示”效果。

✅ 正确做法是：分离“展示用静态值”与“编辑用响应式值”。推荐在组件初始化阶段（如 mounted 钩子）捕获 product.upc 的初始快照，并存入一个独立的 data 字段（例如 upcLabel），后续标签始终绑定该字段：

export default {
  data() {
    return {
      product: {
        upc: '123456789012'
      },
      upcLabel: '' // 用于静态展示的副本
    }
  },
  mounted() {
    this.upcLabel = this.product.upc // 仅执行一次，保留初始值
  }
}

对应模板写法如下：

  
    {{ upcLabel }}
  
  

⚠️ 注意事项：

• 不要使用 computed 或 watch 来同步 upcLabel，否则会破坏“静态性”；
• 若 product 是异步获取（如从 API 加载），请将 this.upcLabel = this.product.upc 移至 created 或 nextTick 中确保数据已存在；
• 在 Vue 3 Composition API 中，可改用 ref() 声明 upcLabel，并在 onMounted 中赋值，逻辑一致。

这种解耦方式简洁、可控，既满足 UI 上“所见即初始值”的设计需求，又不干扰表单的数据流逻辑。