vue的生命周期图解

vue的生命周期函数及过程的简述：

• vue的生命周期函数，其实就是vm的生命周期；
• 创建：beforeCreate、created
• 挂载：beforeMount、mounted
• 更新：beforeUpdate、updated   [ˌʌpˈdeɪtɪd] 
• 销毁：beforeDestroy、destroyed

vue的生命周期就是vue实例从创建，挂载，更新，销毁的过程；

beforeCreate创建前，初始化的vue实例只有默认的事件和生命周期；

beforeCreate和created之间会挂载Data，methods绑定事件；

根据 el 挂载页面元素，如果没有设置 el ，可以调用vm.$mount(el)函数手动挂载；el 挂载结束后，根据编译templete / 或者outerHTML(el)作为模板渲染页面；

在beforeMount前虚拟DOM已经创建完成；之后在mounted前，将vm.$el替换掉页面元素el; mounted 之后将虚拟dom挂载到了真实页面（此时页面已经全部渲染完成）；此时如果数据变化就会触发beforeUpdate和updated进行一些操作；

最后主动调用销毁函数或者组件自动销毁时beforeDestroy，手动撤销监听事件，计时器等；destroyed时仅存在Dom节点，其他所有东西已自动销毁。这就是我所理解的vue的一个完整的生命周期；   

 

 vue 的生命周期图解：