refactor: rename vnode hooks

So that they can be used as @vnodeMounted="..." in templates
This commit is contained in:
Evan You 2019-10-18 14:01:45 -04:00
parent 3cd2f7e68e
commit b5194b16bf
4 changed files with 16 additions and 17 deletions

View File

@ -346,8 +346,8 @@ export function createRenderer<
if (isReservedProp(key)) continue if (isReservedProp(key)) continue
hostPatchProp(el, key, props[key], null, isSVG) hostPatchProp(el, key, props[key], null, isSVG)
} }
if (props.vnodeBeforeMount != null) { if (props.onVnodeBeforeMount != null) {
invokeDirectiveHook(props.vnodeBeforeMount, parentComponent, vnode) invokeDirectiveHook(props.onVnodeBeforeMount, parentComponent, vnode)
} }
} }
if (shapeFlag & ShapeFlags.TEXT_CHILDREN) { if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
@ -363,9 +363,9 @@ export function createRenderer<
) )
} }
hostInsert(el, container, anchor) hostInsert(el, container, anchor)
if (props != null && props.vnodeMounted != null) { if (props != null && props.onVnodeMounted != null) {
queuePostRenderEffect(() => { queuePostRenderEffect(() => {
invokeDirectiveHook(props.vnodeMounted, parentComponent, vnode) invokeDirectiveHook(props.onVnodeMounted, parentComponent, vnode)
}, parentSuspense) }, parentSuspense)
} }
} }
@ -406,8 +406,8 @@ export function createRenderer<
const oldProps = (n1 && n1.props) || EMPTY_OBJ const oldProps = (n1 && n1.props) || EMPTY_OBJ
const newProps = n2.props || EMPTY_OBJ const newProps = n2.props || EMPTY_OBJ
if (newProps.vnodeBeforeUpdate != null) { if (newProps.onVnodeBeforeUpdate != null) {
invokeDirectiveHook(newProps.vnodeBeforeUpdate, parentComponent, n2, n1) invokeDirectiveHook(newProps.onVnodeBeforeUpdate, parentComponent, n2, n1)
} }
if (patchFlag > 0) { if (patchFlag > 0) {
@ -508,9 +508,9 @@ export function createRenderer<
patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG) patchChildren(n1, n2, el, null, parentComponent, parentSuspense, isSVG)
} }
if (newProps.vnodeUpdated != null) { if (newProps.onVnodeUpdated != null) {
queuePostRenderEffect(() => { queuePostRenderEffect(() => {
invokeDirectiveHook(newProps.vnodeUpdated, parentComponent, n2, n1) invokeDirectiveHook(newProps.onVnodeUpdated, parentComponent, n2, n1)
}, parentSuspense) }, parentSuspense)
} }
} }
@ -1682,8 +1682,8 @@ export function createRenderer<
return return
} }
if (props != null && props.vnodeBeforeUnmount != null) { if (props != null && props.onVnodeBeforeUnmount != null) {
invokeDirectiveHook(props.vnodeBeforeUnmount, parentComponent, vnode) invokeDirectiveHook(props.onVnodeBeforeUnmount, parentComponent, vnode)
} }
const shouldRemoveChildren = type === Fragment && doRemove const shouldRemoveChildren = type === Fragment && doRemove
@ -1708,9 +1708,9 @@ export function createRenderer<
if (anchor != null) hostRemove(anchor) if (anchor != null) hostRemove(anchor)
} }
if (props != null && props.vnodeUnmounted != null) { if (props != null && props.onVnodeUnmounted != null) {
queuePostRenderEffect(() => { queuePostRenderEffect(() => {
invokeDirectiveHook(props.vnodeUnmounted, parentComponent, vnode) invokeDirectiveHook(props.onVnodeUnmounted, parentComponent, vnode)
}, parentSuspense) }, parentSuspense)
} }
} }

View File

@ -84,7 +84,7 @@ function applyDirective(
for (const key in directive) { for (const key in directive) {
const hook = directive[key as keyof ObjectDirective]! 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) => { const vnodeHook = (vnode: VNode, prevVNode: VNode | null) => {
let oldValue let oldValue
if (prevVNode != null) { if (prevVNode != null) {

View File

@ -52,9 +52,8 @@ export const toTypeString = (value: unknown): string =>
export const isPlainObject = (val: any): val is object => export const isPlainObject = (val: any): val is object =>
toTypeString(val) === '[object Object]' toTypeString(val) === '[object Object]'
const vnodeHooksRE = /^vnode/
export const isReservedProp = (key: string): boolean => 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 const camelizeRE = /-(\w)/g
export const camelize = (str: string): string => { export const camelize = (str: string): string => {

View File

@ -41,8 +41,8 @@ export const enum PatchFlags {
FULL_PROPS = 1 << 4, FULL_PROPS = 1 << 4,
// Indicates an element that only needs non-props patching, e.g. ref or // Indicates an element that only needs non-props patching, e.g. ref or
// directives (vnodeXXX hooks). It simply marks the vnode as "need patch", // directives (onVnodeXXX hooks). It simply marks the vnode as "need patch",
// since every patched vnode checks for refs and vnodeXXX hooks. // since every patched vnode checks for refs and onVnodeXXX hooks.
// This flag is never directly matched against, it simply serves as a non-zero // This flag is never directly matched against, it simply serves as a non-zero
// value. // value.
NEED_PATCH = 1 << 5, NEED_PATCH = 1 << 5,