Warn the user when trying to use props in camelCase

[CodinCat]

Vue.js version

2.2.1

Reproduction Link

http://codepen.io/CodinCat/pen/Qpdrjq?editors=1010

What is Expected?

A warning.

What is actually happening?

The like above doesn't work correctly (at least, not most users expected) because it is passing aProp in camelCase. Change the template code to :a-prop can fix this problem.

But as you can see, there is no error message nor any warning. It just displays nothing. Sometimes this may make users spend hours to debug. Besides, There are a lot of questions on Stackoverflow because the camelCase and kebab-case problem.

I have to say I make this mistake sometimes, because I switch between React and Vue. If Vue can show a warning for this case would be very helpful.

[posva]

Unfortunately, we can't do anything about this because the Browser parses the HTML before and gives vue a lowercase version of the prop which doesn't exist.

[CodinCat]

I believe this can be achieved. Consider the following snippet. When looping the propOptions:

if (containsUppercase(propKey) && attrs.hasOwnProperty(propKey.toLowerCase()) {
  warn(...)
}

then the warning will show when user trying to pass a prop which is not in kebab-case, but declared in propOptions in camelCase. I'm not sure this code covers all the cases, it's just a small PoC.

[posva]

In that case, feel free to submit a PR with a test for it 🙂
It's clearly stated on the guide, that's why I think it's not necessary to add a warning. Running that check against all props in dev mode looks heavy imo and will impact performance in dev mode.