vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。

在这里借用Vue官方的一张图片

Vue 实例生命周期

组件创建阶段

init Events & lifecycle

初始化事件和生命周期函数

beforeCreate

创建阶段第一个生命周期函数。组件的props/data/methods尚未被创建,都处于不可以状态,在这个阶段什么都做不了

init injections & reactivity

当前阶段表示正在初始化props,data,methos

created

组件的props,data,methods已经创建好,都处于可用状态,但是模板结构尚未构成。

通常此阶段用于调用methods方法,发起Ajax请求,并且将数据转存到data中

Has "el" option

会判断是否有el选项。

如果有el选项会走Yes判断是否有template选项。

如果没有el选项则会调用$mount方法

beforeMount

将要把内存中编译好的HTML结构渲染到浏览器中。此时浏览器中还没有当前组件的DOM结构。没有什么意义

Create vm.$el and replace "el" with it

用内存中编译生成的HTML结构替换掉el属性指定的DOM元素

mounted

已经把内存中的HTML结构,成功的渲染到了浏览器之中。此时浏览器中已包含了当前组件的DOM结构。最早操作DOM结构的生命周期函数。

组件运行阶段

beforeUpdate

将要根据变化过后、最新的数据、重新渲染组件的模板结构。data的数据是最新的,但UI结构不是最新的

virtual DOM re-render and patch

根据最新的数据,重新渲染组件的DOM结构

updated

已经根据最新的数据,完成了组件DOM结构的重新渲染。此时UI结构跟data数据都是最新的

组件销毁阶段

beforeDestroy

将要销毁此组件,但还未销毁,组件还处于正常工作状态

Teardown watchers,child components and event listeners

销毁当前组件的数组侦听器、子组件、事件监听

destroyed

组件已经被销毁,此组件在浏览器中对应的DOM结构已经被完全移除

最后修改:2022 年 06 月 05 日
如果觉得我的文章对你有用,请随意赞赏