vue3中input的value和绑定的ref存在不同的问题

[ANNNYG]

近期在开发中发现一个问题，input中使用:value与ref进行双向数据绑定时，存在限制ref的更改但input中的value却仍然发生改变的问题
代码如下

在ref的长度大于5的时候继续输入，输入框的值还在一直改变


但ref的值确实未发生改变，这个双向数据绑定模式是否有奇怪，是我使用方法的不对或者官方对此有明确的解释？

[ANNNYG]

在react中对数据进行双向绑定的时候，html的表现与value的值是相同的，在vue中这个表现让我有点感到奇怪🤔

[yogwang]

因为React做了处理。虽然你是绑定了 input 事件，但是值也是没有被改变的，就给你恢复成绑定的 value 值了。

Pitfall

If you pass value without onChange, it will be impossible to type into the input. When you control an input by passing some value to it, you force it to always have the value you passed. So if you pass a state variable as a value but forget to update that state variable synchronously during the onChange event handler, React will revert the input after every keystroke back to the value that you specified.
使用 state 控制输入框

[chenxch]

<input :value="inputValue" />
<input v-model="inputValue" />

你试一分别在2个输入框中输入的效果，然后在思考一下。

[ANNNYG]

你可能没懂我的问题 ，我的点在于input的值如果是来源于ref.value，那是不是输入框实际的显示就应该和ref.value完全相同，这才是严格意义上的双向数据绑定。v-module本质也只是个语法糖，我的写法等同于v-module

[chenxch]

这段代码就很好的说明了是target.value先变再去改变ref的value，然后vue的更新原理是不是ref的vlaue有更新视图才会更新，你>5后就一直不变了，input的value就一直是他真实dom的vlaue

[chenxch]

你要知道这个整个更新逻辑
1、input输入了，dom的vlaue发生变化了
2、@input事件触发了
3、然后更新inputValue
4、当inputValue变化了，视图才会更新，input的value才会变成和inputValue一样

[ANNNYG]

你要知道这个整个更新逻辑 1、input输入了，dom的vlaue发生变化了 2、@input事件触发了 3、然后更新inputValue 4、当inputValue变化了，视图才会更新，input的value才会变成和inputValue一样

谢谢你的解答