版本
2.7.10
复现链接
复现步骤
运行带有控制台打开的链接代码。
预期结果
组件中的函数在 mixin 的 beforeCreate 钩子之前被调用，就像在 Vue 3 中一样。
实际发生的情况
mixin 中的函数在组件的 setup 函数之前被调用。
Vue 3 生命周期图显示 setup 在 beforeCreate 之前被调用。Vue 2 图没有提到 setup 函数。我希望在 2.7 和 3.x 之间 setup 和 beforeCreate 的顺序是一致的。
观察 Vue 3 行为的最小复现仓库：https://codepen.io/vetruvet/pen/LYmePyN
为什么要使用 mixin 以及为什么是 beforeCreate?这种行为来自于一个我无法控制的第三方库。我需要在 setup 函数中运行的代码需要访问仅在 setup 函数中可用的变量，同时需要在该 beforeCreate 钩子中的第三方代码之前运行。
查看在哪里调用钩子，确实在 beforeCreate 在 setup(https://github.com/vuejs/vue/blob/v2.7.10/src/core/instance/init.ts#L62 和两行下方 initState 调用了 initSetup)之前被调用。
3条答案
按热度按时间2sbarzqh1#
我猜它可能是在 Vue 2.x 中，mixin hooks 在组件 hooks 之前总是被调用。setup hooks 是组件 hooks。
r55awzrz2#
@ccrcw1314,虽然这是真的 - mixin hooks 在组件hooks之前触发，但我认为这适用于相同类型的hooks。我在问题报告中更新了两个codepen链接，以在组件和mixin中都添加beforeCreate hooks来演示。
Vue 3的触发方式如下：setup→beforeCreate(mixin)→beforeCreate(component)
Vue 2的触发方式如下：beforeCreate(mixin)→beforeCreate(component)→setup
mtb9vblg3#
遗憾的是，使订单与Vue 3保持一致可能会导致意外的破坏。(参见 #12821 / #12822 )
根本原因是
setup()需要先解析props,然而在Vue 2中，props的默认初始化函数可以访问this,并且一些用户依赖于从全局beforeCreate钩子中注入的属性。Vue 3没有这个问题，因为Vue 3的props默认初始化函数无法访问
this。