feat(runtime-core): improve warning for extraneous event listeners (#1005)

fix #1001

packages/runtime-core/src/component.ts

@@ -490,7 +490,9 @@ function finishComponentSetup(
 
 const attrHandlers: ProxyHandler<Data> = {
   get: (target, key: string) => {
-    markAttrsAccessed()
+    if (__DEV__) {
+      markAttrsAccessed()
+    }
     return target[key]
   },
   set: () => {

packages/runtime-core/src/componentRenderUtils.ts

@@ -70,13 +70,25 @@ export function renderComponentRoot(
     } else {
       // functional
       const render = Component as FunctionalComponent
+      // in dev, mark attrs accessed if optional props (attrs === props)
+      if (__DEV__ && attrs === props) {
+        markAttrsAccessed()
+      }
       result = normalizeVNode(
         render.length > 1
-          ? render(props, {
-              attrs,
-              slots,
-              emit
-            })
+          ? render(
+              props,
+              __DEV__
+                ? {
+                    get attrs() {
+                      markAttrsAccessed()
+                      return attrs
+                    },
+                    slots,
+                    emit
+                  }
+                : { attrs, slots, emit }
+            )
           : render(props, null as any /* we know it doesn't need it */)
       )
       fallthroughAttrs = Component.props ? attrs : getFallthroughAttrs(attrs)
@@ -107,17 +119,36 @@ export function renderComponentRoot(
           root.patchFlag |= PatchFlags.FULL_PROPS
         }
       } else if (__DEV__ && !accessedAttrs && root.type !== Comment) {
-        const hasListeners = Object.keys(attrs).some(isOn)
-        warn(
-          `Extraneous non-props attributes (` +
-            `${Object.keys(attrs).join(', ')}) ` +
-            `were passed to component but could not be automatically inherited ` +
-            `because component renders fragment or text root nodes.` +
-            (hasListeners
-              ? ` If the v-on listener is intended to be a component custom ` +
-                `event listener only, declare it using the "emits" option.`
-              : ``)
-        )
+        const allAttrs = Object.keys(attrs)
+        const eventAttrs: string[] = []
+        const extraAttrs: string[] = []
+        for (let i = 0, l = allAttrs.length; i < l; i++) {
+          const key = allAttrs[i]
+          if (isOn(key)) {
+            // remove `on`, lowercase first letter to reflect event casing accurately
+            eventAttrs.push(key[2].toLowerCase() + key.slice(3))
+          } else {
+            extraAttrs.push(key)
+          }
+        }
+        if (extraAttrs.length) {
+          warn(
+            `Extraneous non-props attributes (` +
+              `${extraAttrs.join(', ')}) ` +
+              `were passed to component but could not be automatically inherited ` +
+              `because component renders fragment or text root nodes.`
+          )
+        }
+        if (eventAttrs.length) {
+          warn(
+            `Extraneous non-emits event listeners (` +
+              `${eventAttrs.join(', ')}) ` +
+              `were passed to component but could not be automatically inherited ` +
+              `because component renders fragment or text root nodes. ` +
+              `If the listener is intended to be a component custom event listener only, ` +
+              `declare it using the "emits" option.`
+          )
+        }
       }
     }