在 vue 应用中，当需让 `
Vue 的 v-model 是双向绑定指令，它会自动同步输入框与数据源（如 product.upc），因此任何直接使用 {{ product.upc }} 的地方（包括 <label>）都会实时响应变更——这与“静态显示初始值”的需求相冲突。
解决思路是：分离“展示用的静态副本”与“可编辑的响应式源”。推荐在组件实例挂载时（mounted 钩子），将 product.upc 的初始值复制到一个独立的数据字段（例如 labelUPC），并在模板中绑定该字段：
// Vue 2 示例（Options API）
export default {
data() {
return {
product: {
upc: '123456789012' // 初始 UPC 值
},
labelUPC: null // 用于静态显示的副本
}
},
mounted() {
// 仅在挂载时赋值一次，后续不再更新
this.labelUPC = this.product.upc
}
}对应模板写法如下：
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text p-0">{{ labelUPC }}</label>
</div>
<input
type="text"
class="form-control text-center"
v-model="product.upc"
>
</div>✅ 关键说明：
立即学习“前端免费学习笔记（深入）”；
- labelUPC 是普通响应式数据，但仅在 mounted 中赋值一次，不监听 product.upc 变化，因此标签内容始终保持初始值；
- 输入框仍通过 v-model 完整控制 product.upc，不影响业务逻辑；
- 若需支持服务端初始值异步加载（如从 API 获取 product），请将 labelUPC 赋值逻辑移至 created 或 async mounted 中，在 product.upc 确保存在后再赋值；
- Vue 3 组合式 API 用户可使用 ref() 创建 labelUPC，并在 onMounted() 中初始化，原理一致。
⚠️ 注意：切勿使用计算属性（computed）返回 product.upc 并期望其“静态”——计算属性仍会响应依赖变化；也无需引入 v-once（它仅作用于首次渲染，且无法与 v-model 协同工作）。本质是语义分离：一个字段负责交互，一个字段负责固定展示。
