improve event warning with component information (close #3831)

Author: yyx990803

src/core/instance/events.js

@@ -10,7 +10,7 @@ export function initEvents (vm: Component) {
   const on = bind(vm.$on, vm)
   const off = bind(vm.$off, vm)
   vm._updateListeners = (listeners, oldListeners) => {
-    updateListeners(listeners, oldListeners || {}, on, off)
+    updateListeners(listeners, oldListeners || {}, on, off, vm)
   }
   if (listeners) {
     vm._updateListeners(listeners)

src/core/instance/state.js

@@ -142,10 +142,13 @@ function initMethods (vm: Component) {
   const methods = vm.$options.methods
   if (methods) {
     for (const key in methods) {
-      if (methods[key] != null) {
-        vm[key] = bind(methods[key], vm)
-      } else if (process.env.NODE_ENV !== 'production') {
-        warn(`Method "${key}" is undefined in options.`, vm)
+      vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
+      if (process.env.NODE_ENV !== 'production' && methods[key] == null) {
+        warn(
+          `method "${key}" has an undefined value in the component definition. ` +
+          `Did you reference the function correctly?`,
+          vm
+        )
       }
     }
   }

src/core/vdom/helpers.js

@@ -85,15 +85,17 @@ export function updateListeners (
   on: Object,
   oldOn: Object,
   add: Function,
-  remove: Function
+  remove: Function,
+  vm: Component
 ) {
   let name, cur, old, fn, event, capture
   for (name in on) {
     cur = on[name]
     old = oldOn[name]
     if (!cur) {
       process.env.NODE_ENV !== 'production' && warn(
-        `Handler for event "${name}" is undefined.`
+        `Invalid handler for event "${name}": got ` + String(cur),
+        vm
       )
     } else if (!old) {
       capture = name.charAt(0) === '!'

src/platforms/web/runtime/modules/events.js

@@ -15,7 +15,7 @@ function updateDOMListeners (oldVnode, vnode) {
   const remove = vnode.elm._v_remove || (vnode.elm._v_remove = (event, handler) => {
     vnode.elm.removeEventListener(event, handler)
   })
-  updateListeners(on, oldOn, add, remove)
+  updateListeners(on, oldOn, add, remove, vnode.context)
 }
 
 export default {

test/unit/features/directives/on.spec.js

@@ -230,7 +230,7 @@ describe('Directive v-on', () => {
       data: { none: null },
       template: `<div @click="none"></div>`
     })
-    expect(`Handler for event "click" is undefined`).toHaveBeenWarned()
+    expect(`Invalid handler for event "click": got null`).toHaveBeenWarned()
     expect(() => {
       triggerEvent(vm.$el, 'click')
     }).not.toThrow()

test/unit/features/options/methods.spec.js

@@ -22,6 +22,6 @@ describe('Options methods', () => {
         hello: undefined
       }
     })
-    expect(`Method "hello" is undefined in options`).toHaveBeenWarned()
+    expect(`method "hello" has an undefined value in the component definition`).toHaveBeenWarned()
   })
 })