vue的八个生命周期

Posted iwen1992

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的八个生命周期相关的知识,希望对你有一定的参考价值。

1、beforeCreate: 创建Vue实例之前(只有默认的一些生命周期和默认的一些事件,data和methods还没有被初始化)

2、Create: 数据已经在data方法中初始化了,计算属性,事件回调都已经完成,只不过dom并未挂载
挂载之前回进行得操作会找是否有需要挂载得el对象,有的话判断是否有template模板,有得话那么将模板转化为render函数,通过render函数去渲染DOM树
如果都没有得话,直接把最外层得el对象作为html得模板(data和methods已经被初始化了,最早可以调用到方法和数据的地方就是created)

3、beforeMount:render方法首次被调用生成虚拟DOM(在内存中已经渲染好了模板但并未挂载到页面中此时的页面还是旧页面)

4、mounted:挂载已经完成了,dom树已经完成渲染到页面中得,所以在这时我们可以对真实dom进行操作了(把内存中的模板替换到网页上,此时已经生成真实的dom了)

5、beforeUpdate:数据有更新,更新之前调用(data数据已经更新为最新的数据,页面的数据还是旧的)

6、updated:数据更新之后(页面数据和data数据均被更新)

7、beforeDestroy:实例销毁前(进入销毁阶段,此时所有的data和methods还未被销毁,处于可用状态)

8、destroyed:组件销毁之后(销毁完成,所有的数据,方法,指令、过滤器都被销毁,不可使用了)

以上是关于vue的八个生命周期的主要内容,如果未能解决你的问题,请参考以下文章

Vue生命周期总结(四个阶段,八个钩子函数)

8 创建渲染更新销毁八个生命周期函数

Vue简明实用教程(13)——Vue的生命周期

Vue简明实用教程(13)——Vue的生命周期

软件生命周期模型都有哪些

Vue.js前端框架系统学习——生命周期