diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts index 3ba3c4a8182..2ad2b4f1440 100644 --- a/packages/compiler-core/__tests__/transforms/vOn.spec.ts +++ b/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(`
`) + 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(``, { diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts index c56b300c010..113a1181880 100644 --- a/packages/compiler-core/src/transforms/vOn.ts +++ b/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, `)`]) }