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: https://github.com/vuejs/core/blob/13393308503cc6b32f6974999873427c5fd62fc0/packages/runtime-core/src/renderer.ts#L641-L660

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 (https://github.com/slidevjs/slidev/pull/1279)