Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

As a comparison, enter the following two sets of characters in the input box.

1. Enter '1', '2', '3', '4' in order. They are completely different characters.
2. Enter 'a', 'a', 'a', 'a' in order. They are completely same characters.

What is expected?

In the second case, there should always be a single "a" in the input box.

What is actually happening?

In the second case, Vue does not do anything. The input box behaves just like its default behavior.

Here is my speculation:

Normally, the "value" of the input box is the same as the "text". Therefore, for efficiency, when the value assigned to "text" is the same as the previous one, it is not re-rendered.

However, in the callback of the "input" event, the "value" is the new content entered by the user, and the "text" is the old content that has not been changed. If you try to revert the input box to the old content (by changing the "text"), it will be ignored by Vue.

This behavior is also present on other forms.

(This issue was modified from machine translation. If something is not clear, please feel free to ask.)

A similar problem exists in vue 2, but I haven't tested the version specifically.

I believe that this is the same case as https://github.com/vuejs/vue/issues/7506#issuecomment-372139382 and it always worked like that

When you type "a", component re-renders because previous value of text was "3", but when you type the same letter for the second time, component won't update because value has not changed. You can fix this by setting a new value of the input field in your @input handler.

Updated demo

I think the reason of this bug is the hasChanged function in here: https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/baseHandlers.ts#L170

In this case, the text you input is same as you input before, so it will not trigger effect or update component.

If we remove the hasChanged function, this bug will be fixed. But this comes with additional performance overhead.

Is there a better way to fix it?

Force trigger the ref with triggerRef(): https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiwgdHJpZ2dlclJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgdGV4dCA9IHJlZignMycpXG5cbmZ1bmN0aW9uIG9uSW5wdXQoZXZlbnQpIHtcbiAgdGV4dC52YWx1ZSA9IGV2ZW50LmRhdGFcbiAgdHJpZ2dlclJlZih0ZXh0KVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGlucHV0IDp2YWx1ZT1cInRleHRcIiBAaW5wdXQ9XCJvbklucHV0XCIgPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=

Force trigger the ref with triggerRef(): https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiwgdHJpZ2dlclJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgdGV4dCA9IHJlZignMycpXG5cbmZ1bmN0aW9uIG9uSW5wdXQoZXZlbnQpIHtcbiAgdGV4dC52YWx1ZSA9IGV2ZW50LmRhdGFcbiAgdHJpZ2dlclJlZih0ZXh0KVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGlucHV0IDp2YWx1ZT1cInRleHRcIiBAaW5wdXQ9XCJvbklucHV0XCIgPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=

After testing, this method fails in the following two cases.

1. without using setup: SFC
2. Use other components instead of the native form: SFC

• triggerRef only works on refs, so it's expected that it doesn't work on this.text.
• For case (2), a component won't update if it receives the same props passed to it. In this case you'll have to manually update the input in the child component:

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiwgdHJpZ2dlclJlZiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCBDb21wIGZyb20gJy4vQ29tcC52dWUnXG5cbmNvbnN0IHRleHQgPSByZWYoJzMnKVxuXG5mdW5jdGlvbiBvbklucHV0KGV2ZW50KSB7XG4gIHRleHQudmFsdWUgPSBldmVudC5kYXRhXG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8Q29tcCA6dmFsdWU9XCJ0ZXh0XCIgQGlucHV0PVwib25JbnB1dFwiIC8+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0iLCJDb21wLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgeyByZWYsIG5leHRUaWNrIH0gZnJvbSAndnVlJ1xuICBcbmNvbnN0IGlucHV0ID0gcmVmKClcbiAgXG5jb25zdCBwcm9wcyA9IGRlZmluZVByb3BzKFsndmFsdWUnXSlcbmNvbnN0IGVtaXQgPSBkZWZpbmVFbWl0cyhbJ2lucHV0J10pXG5cbmZ1bmN0aW9uIG9uSW5wdXQoZXZlbnQpIHtcbiAgZW1pdCgnaW5wdXQnLCBldmVudClcbiAgbmV4dFRpY2soKCkgPT4ge1xuICAgIGlucHV0LnZhbHVlLnZhbHVlID0gcHJvcHMudmFsdWVcbiAgfSlcbn1cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxpbnB1dCByZWY9XCJpbnB1dFwiIDp2YWx1ZT1cInZhbHVlXCIgQGlucHV0PVwib25JbnB1dFwiID5cbjwvdGVtcGxhdGU+In0=

I've come up with an argument for this behavior of Vue. This might be an okay explanation:

Vue always assumes that the bound data is the same as the real value of the form. The advantage of this is that when the bound data is assigned by its old value, Vue can ignore the assignment to optimize performance.

However, this assumption is broken in the event that the value of the form is modified by user. At this point, the real value of the component is the value just entered by the user, and the bound data has not yet been updated. In this case, if the bound data is modified with the old value, Vue will incorrectly perform the optimization.

Therefore, to ensure that this assumption always holds. v-modle should always be used to make the data consistent with the true value.