vue:生命周期钩子函数及顺序（vue3.0生命周期函数）

liuian 2025-06-18 22:20 54 浏览

一、vue 的钩子相关顺序

Vue实例有一个完整的生命周期，在new Vue（）后，会初始化数据，如下：

//初始化的入口，各种初始化工作
initMixin(Vue);
//数据绑定的核心方法，包括常用的$watch方法
stateMixin(Vue);
//事件的核心方法，包括常用的$on，$off，$emit方法
eventsMixin(Vue);
//生命周期的核心方法
lifecycleMixin(Vue);
//渲染的核心方法，用来生成render函数以及VNode
renderMixin(Vue);

在initMixin中，可以看出，对应的周期钩子操作顺序如下：

vm._self = vm;
initLifecycle(vm);
initEvents(vm); //初始化事件
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');

故加载及销毁顺序如下：

加载页面执行步骤
1、父组件：beforeCreate -> created -> beforeMount
2、子组件：beforeCreate -> created -> beforeMount -> mounted
3、父组件：mounted
销毁组件执行步骤
1、父组件：beforeDestroy
2、子组件：beforeDestroy
3、子组件：destroyed
2、父组件：destroyed

二、vue的各个钩子能做哪些操作

beforeCreate：
在此阶段，实例刚在内存中被创建出来。此时，data的数据和methods中方法的都还没有初始化，数据和模板均获取不到
created：
在此阶段，实例已经在内存中创建完成。data 和 methods、computed都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。此生命周期为最早可进行ajax异步数据请求的生命周期，服务端渲染也可在此进行
beforeMount：
执行到这个钩子的时候，在内存中已经编译好了模板了，相关的render函数首次被调用（虚拟DOM）,但是还没有挂载到页面中，此时，页面还是旧的
mounted：
执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行，mounted只会执行一次。
beforeUpdate：
当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步，不会触发附加地重渲染过程
updated：
调用时，组件DOM已经更新，页面显示的数据和data中的数据已经保持同步了，都是最新的 。所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
beforeDestory：
Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁，此时还是可以访问实例的属性

另外两个：
activated
  keep-alive组件激活时调用。
  该钩子在服务器端渲染期间不被调用。
deactivated
  keep-alive组件停用时调用。
  该钩子在服务端渲染期间不被调用。
activated()和deactivated()只有在<keep-alive></keep-alive>包裹的时候才有效；

vue init