feat(compiler-core/v-on): support @vnode-xxx usage for vnode hooks

Author: yyx990803

packages/compiler-core/__tests__/transforms/vOn.spec.ts

@@ -300,6 +300,20 @@ describe('compiler: transform v-on', () => {
     expect(onError).not.toHaveBeenCalled()
   })
 
+  test('case conversion for vnode hooks', () => {
+    const { node } = parseWithVOn(`<div v-on:vnode-mounted="onMount"/>`)
+    const props = (node.codegenNode as CallExpression)
+      .arguments[1] as ObjectExpression
+    expect(props.properties[0]).toMatchObject({
+      key: {
+        content: `onVnodeMounted`
+      },
+      value: {
+        content: `onMount`
+      }
+    })
+  })
+
   describe('cacheHandler', () => {
     test('empty handler', () => {
       const { root, node } = parseWithVOn(`<div v-on:click.prevent />`, {

packages/compiler-core/src/transforms/vOn.ts

@@ -8,7 +8,7 @@ import {
   createCompoundExpression,
   SimpleExpressionNode
 } from '../ast'
-import { capitalize } from '@vue/shared'
+import { capitalize, camelize } from '@vue/shared'
 import { createCompilerError, ErrorCodes } from '../errors'
 import { processExpression } from './transformExpression'
 import { isMemberExpression, hasScopeRef } from '../utils'
@@ -38,11 +38,12 @@ export const transformOn: DirectiveTransform = (
   let eventName: ExpressionNode
   if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
     if (arg.isStatic) {
-      eventName = createSimpleExpression(
-        `on${capitalize(arg.content)}`,
-        true,
-        arg.loc
-      )
+      const rawName = arg.content
+      // for @vnode-xxx event listeners, auto convert it to camelCase
+      const normalizedName = rawName.startsWith(`vnode`)
+        ? capitalize(camelize(rawName))
+        : capitalize(rawName)
+      eventName = createSimpleExpression(`on${normalizedName}`, true, arg.loc)
     } else {
       eventName = createCompoundExpression([`"on" + (`, arg, `)`])
     }