vue组件的生命周期详解

Posted 2021-09-15 mmsmd

1.生命周期&生命周期函数

生命周期：指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。

生命周期函数：由vue框架提供的内置函数，会伴随着组件的生命周期，自动按序执行。

即：生命周期强调的是时间段，生命周期函数强调的是时间点

组件生命周期函如下：

1.beforeCreated()处于 初始化事件和生命周期函数 之后， 初始化props、data、methods 之前，此时组建的props、data、methods未被创建，在该函数中不可用。

2.created()处于 初始化props、data、methods 之后，模板结构生成 之前。此时组件的props、data、methods已经创建好，可以调用，不过此时还未进行渲染，不推荐操作DOM。

3.beforeMounted()时间点 将要把内存中编译好的html结构渲染到浏览器中，此时浏览器中还没有当前组件的DOM结构。

4.mounted()，此时已经将内存中的HTML结构成功渲染到浏览器，浏览器中已经包含了当前组件的DOM结构。

5.beforeUpdate()在data数据发生改变的时候，会触发该函数，将要 变化后的最新数据重新渲染到组件的模板结构(还没渲染)。

6.updated()已经根据最新数据完成了DOM结构的重新渲染。

7.beforeDestory()将要销毁此组件，还未销毁，组件正常工作。

8.destroyed()组件已经销毁，该组件在浏览器中对应的DOM结构已经完全移除。

用的比较多的是created()与mounted()以及update()。

上述生命周期函数都可以从vue官方的生命周期函数图示中找到，可以通过该图示进一步了解生命周期执行过程：