feat(v-model): warn for undefined binding values (#5932)

[chriscasola]

Warn when the v-model binding value is undefined so users are aware that the binding may not be
reactive.

Fixes #5932

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

I'm not sure if checking if the value is undefined is the right thing to do. I was hoping to do some kind of hasOwnProperty-like check to see if the key in the object exists, but I couldn't figure out how to do that. If that's what makes more sense a pointer in the right direction would be awesome.

[yyx990803]

Thanks for the PR - unfortunately, this will also warn even if the value is explicitly declared as undefined:

data () {
  return {
    foo: undefined
  }
}

[chriscasola]

Yeah...I noticed that but was unsure how to check properly:

I'm not sure if checking if the value is undefined is the right thing to do. I was hoping to do some kind of hasOwnProperty-like check to see if the key in the object exists, but I couldn't figure out how to do that. If that's what makes more sense a pointer in the right direction would be awesome.

Any suggestions on how to check for the property existing?

[posva]

Shouldn't the in operator be enough? if (key in object)

[chriscasola]

The in operator isn't enough, because at this point in the code, I think the value of the binding has already been evaluated. So the binding only has two properties, expression and value. And if the key doesn't exist in the data of the component then binding.value is present but the value is undefined.

I think the check needs to be further up the stack but I'm not sure where. I'll keep digging.

[chriscasola]

@posva @yyx990803 I think I have a solution that works correctly. I'm not sure it's the best way to go about this, but I did a lot of digging and I couldn't figure out any other way to be able to check properties in the second-to-last object in the binding expression.

[yyx990803]

@chriscasola thanks a lot for looking into this - I just made a comment here: #5932 (comment)

I also implemented a proper warning check strategy in 0fbad1e - but we will probably not use that. Feel free to compare that to your implementation - sorry for your wasted effort, hopefully this can at least help you understand the codebase better and make it easy for further contributions! 🙇

[chriscasola]

@yyx990803 no problem - thanks for your commit, that definitely clarifies things.