Inconsistency order of `created` hook between component and custom directive

[kermanx]

Vue version

3.4.16 (current)

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ultd9j?file=src%2Fmain.js

Steps to reproduce

1. Open the Stackblitz playground above.
2. See the output in the preview window:

HMR is broken here. Please refresh the page manually.

What is expected?

The created hook of custom directives should be first called in parent, then in child.

Otherwise, another custom directive hook which is first called in parent, then in child should be provided.

To not break any existing code, I think a new hook should be added, or a workaround should be provided.

What is actually happening?

The created hook of components is first called in parent, then in child.

The created hook of directives is first called in child, then in parent.

This is inconsistent. And there isn't a custom directive hook that is first called in parent, then in child.

System Info

N/A

Any additional comments?

Related code:

core/packages/runtime-core/src/renderer.ts

Lines 641 to 660 in 1339330

	// mount children first, since some props may rely on child content
	// being already rendered, e.g. `<select value>`
	if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
	hostSetElementText(el, vnode.children as string)
	} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
	mountChildren(
	vnode.children as VNodeArrayChildren,
	el,
	null,
	parentComponent,
	parentSuspense,
	resolveChildrenNamespace(vnode, namespace),
	slotScopeIds,
	optimized,
	)
	}
	if (dirs) {
	invokeDirectiveHook(vnode, null, parentComponent, 'created')
	}

It seems that the comment in L641-L642 says sometimes props rely on child content. However, I think for most custom directives, the order "first parent, then child" is more important. Maybe we can swap L641-L656 and L658-660 (for consistency with 'created' component hook), and add a new hook 'childCreated' for directives that rely on child content.

The custom directive hook which is first called in parent is useful in the Slidev v-click system (slidevjs/slidev#1279)

[kermanx]

This issue is stoping the following workaround (related to #5002) from working, because children's created is called before the parent's:

export function directiveProvide<T = unknown>(dir: DirectiveBinding<any>, key: InjectionKey<T> | string, value?: T) {
  const instance = dir.instance?.$ as any
  if (instance) {
    let provides = instance.provides
    const parentProvides = instance.parent?.provides
    if (provides === parentProvides) 
      provides = instance.provides = Object.create(parentProvides)
    provides[key as any] = value
  }
}

This is currently a must to make v-click and v-motion work together in Slidev.