Vue生命周期详解

Vue生命周期

先看一张vue官网的生命周期阶段图：

1.Vue的生命周期在2.0版本分为了8个阶段，如下：

1. beforeCreate: 组件实例刚刚被创建，但是data属性等还未初始化
2. created: 组件实例创建完成，data属性初试化完成，此时可以访问data内的数据。但是el属性还未初始化。
3. beforeMount: 组件模板编译/挂载前，el初始化完成，DOM还未生成。
4. mounted: 组件模板编译/挂载完成。此时el初试完成，DOM完成渲染。
5. beforeUpdate: 组件更新前。(一般是数据)，此时数据已经完成了更新，但是DOM还未重新渲染。
6. updated: 组件完成更新，DOM重写渲染完成。
7. beforeDestroy: 组件销毁前，实例触发$destroy()方法后，就进入销毁过程。此时开始销毁组件的所有事件机制。
8. destroyed: 组件销毁完成。

当一个组件同时有template和el属性时，哪个属性优先呢？

1.根据上图，可以清晰的知道，组件create周期(实例创建完成)执行完后，会先判断实例是否el属性，如果有，再判断实例是否有template属性。如果没有el属性，就会进入暂停，等到实例调用$mount(el);方法之后，还是判断是否有template属性，如果有template属性那么组件将会使用template的值作为模板进行编译，而不是选择el属性。只有当没有template属性的时候才会选择el属性作为模板进行编译。

所以template属性是优先于el属性的