diff --git a/packages/runtime-core/src/createRenderer.ts b/packages/runtime-core/src/createRenderer.ts index 0a059c001..9d2fc51ec 100644 --- a/packages/runtime-core/src/createRenderer.ts +++ b/packages/runtime-core/src/createRenderer.ts @@ -346,8 +346,8 @@ export function createRenderer< if (isReservedProp(key)) continue hostPatchProp(el, key, props[key], null, isSVG) } - if (props.vnodeBeforeMount != null) { - invokeDirectiveHook(props.vnodeBeforeMount, parentComponent, vnode) + if (props.onVnodeBeforeMount != null) { + invokeDirectiveHook(props.onVnodeBeforeMount, parentComponent, vnode) } } if (shapeFlag & ShapeFlags.TEXT_CHILDREN) { @@ -363,9 +363,9 @@ export function createRenderer< ) } hostInsert(el, container, anchor) - if (props != null && props.vnodeMounted != null) { + if (props != null && props.onVnodeMounted != null) { queuePostRenderEffect(() => { - invokeDirectiveHook(props.vnodeMounted, parentComponent, vnode) + invokeDirectiveHook(props.onVnodeMounted, parentComponent, vnode) }, parentSuspense) } } @@ -406,8 +406,8 @@ export function createRenderer< const oldProps = (n1 && n1.props) || EMPTY_OBJ const newProps = n2.props || EMPTY_OBJ - if (newProps.vnodeBeforeUpdate != null) { - invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2, n1) + if (newProps.onVnodeBeforeUpdate != null) { + invokeDirectiveHook(newProps.onVnodeBeforeUpdate, parentComponent, n2, n1) } if (patchFlag > 0) { @@ -508,9 +508,9 @@ export function createRenderer< patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG) } - if (newProps.vnodeUpdated != null) { + if (newProps.onVnodeUpdated != null) { queuePostRenderEffect(() => { - invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2, n1) + invokeDirectiveHook(newProps.onVnodeUpdated, parentComponent, n2, n1) }, parentSuspense) } } @@ -1682,8 +1682,8 @@ export function createRenderer< return } - if (props != null && props.vnodeBeforeUnmount != null) { - invokeDirectiveHook(props.vnodeBeforeUnmount, parentComponent, vnode) + if (props != null && props.onVnodeBeforeUnmount != null) { + invokeDirectiveHook(props.onVnodeBeforeUnmount, parentComponent, vnode) } const shouldRemoveChildren = type === Fragment && doRemove @@ -1708,9 +1708,9 @@ export function createRenderer< if (anchor != null) hostRemove(anchor) } - if (props != null && props.vnodeUnmounted != null) { + if (props != null && props.onVnodeUnmounted != null) { queuePostRenderEffect(() => { - invokeDirectiveHook(props.vnodeUnmounted, parentComponent, vnode) + invokeDirectiveHook(props.onVnodeUnmounted, parentComponent, vnode) }, parentSuspense) } } diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts index 01c9a8324..088695040 100644 --- a/packages/runtime-core/src/directives.ts +++ b/packages/runtime-core/src/directives.ts @@ -84,7 +84,7 @@ function applyDirective( for (const key in directive) { const hook = directive[key as keyof ObjectDirective]! - const hookKey = `vnode` + key[0].toUpperCase() + key.slice(1) + const hookKey = `onVnode` + key[0].toUpperCase() + key.slice(1) const vnodeHook = (vnode: VNode, prevVNode: VNode | null) => { let oldValue if (prevVNode != null) { diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index 4511f4f63..a866a99bf 100644 --- a/packages/shared/src/index.ts +++ b/packages/shared/src/index.ts @@ -52,9 +52,8 @@ export const toTypeString = (value: unknown): string => export const isPlainObject = (val: any): val is object => toTypeString(val) === '[object Object]' -const vnodeHooksRE = /^vnode/ export const isReservedProp = (key: string): boolean => - key === 'key' || key === 'ref' || key === '$once' || vnodeHooksRE.test(key) + key === 'key' || key === 'ref' || key === '$once' || key.startsWith(`onVnode`) const camelizeRE = /-(\w)/g export const camelize = (str: string): string => { diff --git a/packages/shared/src/patchFlags.ts b/packages/shared/src/patchFlags.ts index 3bdee641a..48fe939b0 100644 --- a/packages/shared/src/patchFlags.ts +++ b/packages/shared/src/patchFlags.ts @@ -41,8 +41,8 @@ export const enum PatchFlags { FULL_PROPS = 1 << 4, // Indicates an element that only needs non-props patching, e.g. ref or - // directives (vnodeXXX hooks). It simply marks the vnode as "need patch", - // since every patched vnode checks for refs and vnodeXXX hooks. + // directives (onVnodeXXX hooks). It simply marks the vnode as "need patch", + // since every patched vnode checks for refs and onVnodeXXX hooks. // This flag is never directly matched against, it simply serves as a non-zero // value. NEED_PATCH = 1 << 5,