vue的生命周期理解

1、Vue 的生命周期图

2、对Vue生命周期的理解

初始化阶段

2.1、 new Vue() 创建一个Vue实例

2.2、beforeCreate() 第一个执行的生命周期函数，在这个函数执行的时候vue实例仅仅完成内部事件和内部生命周期方法初始化

2.3、created() 第二个执行的生命周期函数，在这个函数执行的时候已经完成自定义data、methods、computed等属性的初始化以及语法的校验

2.4、beforeMount() 第三个执行的生命周期函数，在这个函数执行的时候vue实例仅仅是将el属性指向的html编译成vue模板，此时还没有完成模板内容赋值

2.5、mounted() 第四个执行的生命周期函数，在这个函数执行的时候vue实例会将data数据渲染到编译后的模板中并形成虚拟dom，替换el模板

运行阶段

2.6、beforeUpdate() 第五个执行的生命周期函数，在这个函数执行的时候，vue实例中的data数据发生改变，但是页面中的数据还是原始数据

2.7、updated() 第六个执行的生命周期函数，在这个函数执行的时候，vue实例中的页面数据已经和data数据抑制了

销毁阶段

2.8、beforeDestroy() 第七个执行的生命周期函数，在这个函数执行的时候，vue实列仅仅是开始销毁data methods …

2.9、destroy() 第八个执行的生命周期函数，在这个函数执行的时候，vue上的所有数据 event、child component listener监听机制都会销毁