在 vue 应用中，当需要让 `
v-model 是 Vue 提供的双向绑定语法糖，它会自动同步表单元素与数据属性——这意味着只要 product.upc 被修改，所有依赖它的插值表达式（如 @{{ product.upc }}）都会立即更新。因此，无法通过仅修改模板来实现“标签静态、输入框动态”的效果；必须在数据层分离「显示用静态值」和「编辑用响应式值」。
✅ 正确做法：用独立 data 字段保存初始值
在组件初始化阶段（如 mounted 钩子）捕获 product.upc 的初始值，并赋给一个专用字段（例如 upcLabel），后续标签始终绑定该字段：
export default {
data() {
return {
product: {
upc: '123456789012'
},
upcLabel: '' // 用于静态显示的副本
}
},
mounted() {
this.upcLabel = this.product.upc
}
}对应模板写法如下：
? 关键点说明： upcLabel 是普通字符串，非响应式引用，不会随 product.upc 变化而更新； v-model 仅作用于 product.upc，保证输入逻辑不受影响； 若需支持「重置为原始值」功能，可额外封装方法： methods: { resetUpc() { this.product.upc = this.upcLabel } }
⚠️ 注意事项
- ❌ 不要使用 computed 返回 product.upc —— 它仍是响应式依赖，值会同步变化；
- ❌ 避免在 data 中直接写 upcLabel: this.product.upc（此时 this 尚未初始化，会报错）；
- ✅ 如需多处复用该模式（如多个字段），建议封装为 mixin 或组合式 API 的 useStaticLabel 函数；
- ✅ 在 Vue 3 + Composition API 中，可更清晰地用 ref() 和 onMounted 实现：
import { ref, onMounted } from 'vue' export default { setup() { const product = ref({ upc: '123456789012' }) const upcLabel = ref('') onMounted(() => { upcLabel.value = product.value.upc }) return { product, upcLabel } } }
通过分离数据职责，你既能保障 UI 表达的确定性（标签恒定），又不牺牲交互灵活性（输入实时生效），这是 Vue 响应式设计中「明确数据流向」的典型实践。
立即学习“前端免费学习笔记（深入）”；
