diff --git a/packages/compiler-core/__tests__/transforms/vOn.spec.ts b/packages/compiler-core/__tests__/transforms/vOn.spec.ts index 7a8fba9c641..3c56ce9aadd 100644 --- a/packages/compiler-core/__tests__/transforms/vOn.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vOn.spec.ts @@ -563,6 +563,58 @@ describe('compiler: transform v-on', () => { }) }) + test('inline async arrow function expression handler', () => { + const { root, node } = parseWithVOn( + `
`, + { + prefixIdentifiers: true, + cacheHandlers: true + } + ) + expect(root.cached).toBe(1) + const vnodeCall = node.codegenNode as VNodeCall + // should not treat cached handler as dynamicProp, so no flags + expect(vnodeCall.patchFlag).toBeUndefined() + expect( + (vnodeCall.props as ObjectExpression).properties[0].value + ).toMatchObject({ + type: NodeTypes.JS_CACHE_EXPRESSION, + index: 0, + value: { + type: NodeTypes.COMPOUND_EXPRESSION, + children: [`async () => await `, { content: `_ctx.foo` }, `()`] + } + }) + }) + + test('inline async function expression handler', () => { + const { root, node } = parseWithVOn( + `
`, + { + prefixIdentifiers: true, + cacheHandlers: true + } + ) + expect(root.cached).toBe(1) + const vnodeCall = node.codegenNode as VNodeCall + // should not treat cached handler as dynamicProp, so no flags + expect(vnodeCall.patchFlag).toBeUndefined() + expect( + (vnodeCall.props as ObjectExpression).properties[0].value + ).toMatchObject({ + type: NodeTypes.JS_CACHE_EXPRESSION, + index: 0, + value: { + type: NodeTypes.COMPOUND_EXPRESSION, + children: [ + `async function () { await `, + { content: `_ctx.foo` }, + `() } ` + ] + } + }) + }) + test('inline statement handler', () => { const { root, node } = parseWithVOn(`
`, { prefixIdentifiers: true, diff --git a/packages/compiler-core/src/transforms/vOn.ts b/packages/compiler-core/src/transforms/vOn.ts index 42a289bb888..1815e09bc9c 100644 --- a/packages/compiler-core/src/transforms/vOn.ts +++ b/packages/compiler-core/src/transforms/vOn.ts @@ -16,7 +16,8 @@ import { validateBrowserExpression } from '../validateExpression' import { hasScopeRef, isMemberExpression } from '../utils' import { TO_HANDLER_KEY } from '../runtimeHelpers' -const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^\s*function(?:\s+[\w$]+)?\s*\(/ +const fnExpRE = + /^\s*([\w$_]+|(async\s*)?\([^)]*?\))\s*=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/ export interface VOnDirectiveNode extends DirectiveNode { // v-on without arg is handled directly in ./transformElements.ts due to it affecting