Vue中修改v-model绑定属性为何会重置v-bind绑定的输入框？

你遇到的问题核心在于Vue的响应式渲染机制和单向绑定、双向绑定的差异：

1. 单向绑定的局限性
   第一个输入框用:value="vBind"是单向绑定：它只负责把vBind的值渲染到输入框里，但输入框的手动修改不会同步回vBind数据。当你在第一个输入框输入内容时，输入框的DOM值变了，但vBind还是初始的'default'。

2. 组件重新渲染触发重置
   当你修改第二个用v-model绑定的输入框时，vModel的值会被更新，这会触发Vue组件的重新渲染。重新渲染时，Vue会重新计算第一个输入框的value属性，用当前vBind的原始值（'default'）去覆盖输入框的DOM值，所以你看到第一个输入框被“重置”了。

3. v-model的双向绑定逻辑
   你提到v-model等价于v-bind+@update是对的，它在单向绑定的基础上，额外监听了输入框的输入事件，把输入内容同步回对应的数据。所以用v-model的输入框，手动修改会更新数据，重新渲染时数据和DOM值是一致的，不会出现重置问题。

验证和解决方法 #

如果给第一个输入框加上输入事件同步数据，就不会出现重置了：

<input :value="vBind" @input="vBind = $event.target.value">
<input v-model="vModel">

这样修改第一个输入框时，vBind会同步更新，组件重新渲染时，输入框的value会用更新后的vBind值，自然不会被重置。

内容的提问来源于stack exchange，提问作者Cedric Cholley