Order of setup vs beforeCreate not consistent with Vue 3 behavior

[vetruvet]

Version

2.7.10

Reproduction link

codepen.io

Steps to reproduce

Run the linked codepen with console open.

What is expected?

setup function from the component to be called before beforeCreate hook from the mixin as it is in Vue 3

What is actually happening?

beforeCreate function from the mixin is being called before the setup function from the component

---

Vue 3 lifecycle diagram shows setup being called before beforeCreate. Vue 2 diagram does not make any mention of the setup function. I would expect that the order of setup vs beforeCreate would be consistent between 2.7 and 3.x.

Minimal reproduction repo to observe vue 3 behavior: https://codepen.io/vetruvet/pen/LYmePyN

Why a mixin and why beforeCreate? This behavior is coming from a third-party library I don't control. The code I need to run in the setup function needs to access variables that are only available in the setup function and at the same time needs to run before that 3rd-party code in the beforeCreate hook.

Looking at the where the hooks are called, beforeCreate is indeed called before setup (https://github.com/vuejs/vue/blob/v2.7.10/src/core/instance/init.ts#L62 and two lines down initState calls initSetup)

[ccrcw1314]

I guess it might be in Vue2.x, the mixin hooks is always called before component hooks. setup hooks is a component hooks.
https://v2.vuejs.org/v2/guide/mixins.html

[vetruvet]

@ccrcw1314 while that is true - mixin hooks fire before component hooks, I believe that applies for hooks of the same type. I updated both codepen links in the issue report to have beforeCreate hooks in both the components and the mixin to demonstrate.

Vue 3 fires them like this: setup→beforeCreate(mixin)→beforeCreate(component)
Vue 2 fires them like this: beforeCreate(mixin)→beforeCreate(component)→setup

[yyx990803]

Unfortunately making the order consistent with Vue 3 can cause unintended breakage. (See #12821 / #12822)

Root cause is that setup() requires props to be resolved first, however in Vue 2, props default initializer functions have access to this, and some users rely on properties injected from global beforeCreate hooks in these functions.

Vue 3 doesn't have this problem because Vue 3 props default initializer functions do not have access to this.