Vue 2 如何在beforeCreate阶段终止created()、mounted()的执行？

核心结论 #

Vue 2 原生的设计逻辑里，不存在能在beforeCreate阶段完全中断后续created、mounted全链路生命周期执行的官方实现方案。框架的实例初始化流程是固定的同步连续执行链路，除了抛出未捕获异常这类破坏性操作外，没有向开发者暴露可以主动中断初始化流程的接口。

为什么在beforeCreate调用$destroy()达不到预期效果 #

遇到的$destroy()执行后依然会走完created和后续钩子的问题，是由Vue 2的执行时序决定的：

• 整个实例初始化流程是在同一个同步调用栈里连续执行的，$destroy()方法被调用时，只会给当前实例标记销毁状态、把销毁逻辑加入执行队列，根本无法插队打断当前正在运行的初始化流程。
• 实际执行路径是：哪怕在beforeCreate里第一行就写this.$destroy()，后续的初始化逻辑依然会同步按顺序走完created、beforeMount、首次mounted的全部步骤，等整个初始化调用栈执行完成后，才会真正触发实例的销毁流程，完全达不到提前终止的目的。

可落地的替代实现 #

从父层控制渲染，根源跳过组件初始化 #

这是最符合需求的方案，没有任何执行时序的问题：

• 把原本计划放在子组件beforeCreate里的判断逻辑，上移到父组件的渲染控制层，通过v-if判断是否需要创建子组件实例。
• 只要判断条件不满足，子组件根本不会进入实例初始化流程，从根源上跳过所有子组件的生命周期钩子，不会触发created、mounted的执行。
• 参考代码：

<!-- 父组件模板 -->
<MyChild v-if="shouldShowChild" />

判断逻辑可以写在父组件的计算属性、数据监听或者其他生命周期里，控制shouldShowChild的取值即可。

仅拦截DOM挂载的内部实现 #

如果需求只是阻止组件生成实际DOM、跳过mounted执行，不要求中断created钩子，可以在beforeCreate阶段覆写组件的渲染函数：

beforeCreate() {
  // 替换渲染函数，返回空的虚拟节点
  this.$options.render = (h) => h()
  this.$options.staticRenderFns = []
}

• 注意该方案的局限：created的触发时机早于渲染流程启动，这种方式完全无法中断created的执行，仅能跳过后续的DOM挂载步骤。

不推荐的破坏性操作 #

如果强行在beforeCreate阶段抛出未捕获的JS异常，虽然能打断后续的初始化流程，但是会触发全局错误监控、打断应用的同步执行链路，存在污染全局错误处理、引发页面逻辑异常的风险，完全不适合生产环境使用。

内容的提问来源于stack exchange，提问作者Tim Mishutin