Props keys always being set in 3.1.0-beta.1 results in a breaking change

[liamdebeasi]

Version

3.1.0-beta.1

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8dGVzdC1jbXAgdmFsdWU9XCJNeSBWYWx1ZVwiPjwvdGVzdC1jbXA+PGJyIC8+XG4gIDx0ZXN0LWNtcCB2LW1vZGVsPVwibXlSZWZcIj48L3Rlc3QtY21wPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgaCwgcmVmIH0gZnJvbSAndnVlJztcblxuY29uc3QgZGVmaW5lQ29udGFpbmVyID0gKG5hbWUsIGNtcFByb3BzKSA9PiB7XG4gIGNvbnN0IENvbnRhaW5lciA9IGRlZmluZUNvbXBvbmVudCgocHJvcHMsIHsgc2xvdHMgfSkgPT4ge1xuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBjb25zdCBwcm9wc1RvQWRkID0ge1xuICAgICAgICAndmFsdWUnOiBwcm9wcy5oYXNPd25Qcm9wZXJ0eSgnbW9kZWxWYWx1ZScpID8gcHJvcHMubW9kZWxWYWx1ZSA6IHByb3BzLnZhbHVlXG4gICAgICB9XG4gICAgICBcbiAgICAgIHJldHVybiBoKG5hbWUsIHByb3BzVG9BZGQsIGgoJ2RpdicsIGBDb21wb25lbnQgVmFsdWU6IFwiJHtwcm9wc1RvQWRkLnZhbHVlfVwiYCkpO1xuICAgIH1cbiAgfSlcbiAgXG4gIENvbnRhaW5lci5kaXNwbGF5TmFtZSA9IG5hbWU7XG4gIENvbnRhaW5lci5wcm9wcyA9IFsuLi5jbXBQcm9wc107XG4gIFxuICByZXR1cm4gQ29udGFpbmVyO1xufVxuXG5jb25zdCBUZXN0Q21wID0gZGVmaW5lQ29udGFpbmVyKCd0ZXN0LWNtcCcsIFsndmFsdWUnLCAnbW9kZWxWYWx1ZSddKTtcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHtcbiAgbmFtZTogJ0hlbGxvV29ybGQnLFxuICBjb21wb25lbnRzOiB7IFRlc3RDbXAgfSxcbiAgc2V0dXAoKSB7XG4gICAgY29uc3QgbXlSZWYgPSByZWYoJ015IFZhbHVlIHdpdGggdi1tb2RlbCcpO1xuICAgIFxuICAgIHJldHVybiB7IG15UmVmIH1cbiAgfVxufSk7XG48L3NjcmlwdD4ifQ==

Steps to reproduce

1. Open reproduction. The code is running 3.1.0-beta.7.
2. Observe that there are two "test-cmp" components. The first one has its value set using the "value" prop. The second one has its value set using v-model.
3. In the preview area, observe that the first component renders "undefined", and the second one renders "My Value with v-model".
4. Change the reproduction to use Vue 3.0.11.
5. Observe that this time the first component renders "My Value" instead of "undefined".

This seems to be related to 4fe4de0.

What is expected?

I would expect that the modelValue key is not set unless actually using v-model.

What is actually happening?

The modelValue key is set even in instances of my component that do not use v-model.

---

This impacts Ionic Vue applications. In Ionic Vue, we need to account for both value and modelValue so that we can set the correct component value on the underlying Web Component. Currently we use the following check:

const propsToAdd = {
  'value': props.hasOwnProperty('modelValue') ? props.modelValue : props.value
}

With Vue 3.1.0 since the modelValue key is always there, this condition is always true which breaks components that are using value instead of v-model. The workaround is pretty simple:

const propsToAdd = {
  'value': props.hasOwnProperty('modelValue') && props.modelValue !== undefined ? props.modelValue : props.value
}

But at the same time this feels like a breaking change and should either be done in Vue 4.0 or noted in the changelog if breaking changes are allowed for minor releases.

[posva]

This was intended. You have a workaround at #3288 (comment)

Maybe this should be documented

[liamdebeasi]

I would consider a change in behavior to the public props API to be a breaking change in this case, so it would be helpful to have this documented.

[yyx990803]

Yes, this is an unfortunate case where the behavior inconsistency between Vue 2 and Vue 3 led to code that relies on the Vue 3 behavior. However it is still considered a fix since the behavior consistency has a higher priority.

I've updated pending 3.1 docs update to document this in vuejs/docs@e41f441

Also added it to the release note draft.

[liamdebeasi]

Makes sense. Thank you!