improve camelCase prop warning message

Author: yyx990803

src/core/util/debug.js

@@ -32,9 +32,11 @@ if (process.env.NODE_ENV !== 'production') {
     if (vm.$root === vm) {
       return '<Root>'
     }
-    let name = vm._isVue
-      ? vm.$options.name || vm.$options._componentTag
-      : vm.name
+    let name = typeof vm === 'function' && vm.options
+      ? vm.options.name
+      : vm._isVue
+        ? vm.$options.name || vm.$options._componentTag
+        : vm.name
 
     const file = vm._isVue && vm.$options.__file
     if (!name && file) {

src/core/vdom/create-component.js

@@ -10,7 +10,8 @@ import {
   isObject,
   hasOwn,
   hyphenate,
-  validateProp
+  validateProp,
+  formatComponentName
 } from '../util/index'
 
 import {
@@ -293,8 +294,11 @@ function extractProps (data: VNodeData, Ctor: Class<Component>): ?Object {
           attrs && attrs.hasOwnProperty(keyInLowerCase)
         ) {
           warn(
-            `HTML attributes are case-insensitive. camelCased prop names need ` +
-            `to use their kebab-case equivalents. ${key} should be ${altKey}.`
+            `Prop "${keyInLowerCase}" is not declared in component ` +
+            `${formatComponentName(Ctor)}. Note that HTML attributes are ` +
+            `case-insensitive and camelCased props need to use their kebab-case ` +
+            `equivalents when using in-DOM templates. You should probably use ` +
+            `"${altKey}" instead of "${key}".`
           )
         }
       }

test/unit/features/component/component.spec.js

@@ -272,8 +272,7 @@ describe('Component', () => {
       }
     }).$mount()
     expect(
-      'HTML attributes are case-insensitive. camelCased prop names need ' +
-      'to use their kebab-case equivalents. someCollection should be some-collection.'
+      'You should probably use "some-collection" instead of "someCollection".'
     ).toHaveBeenWarned()
   })