Vue之生命周期简述

Vue生命周期

---

Vue生命周期是指从Vue实例创建到虚拟dom产生再到数据绑定、数据监听、数据渲染以及销毁的整个过程。

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

---

Vue实例初始化阶段

生命周期的第一步首先是创建Vue实例，并且进行初始化。

beforeCreate
在初始化的时候调用了beforeCreate,完成了vue实例的生命周期相关属性的初始化以及事件的 初始化。这个时候还不能直接访问data中的属性及method中的方法。

created
在初始化完毕以后，完成了vue的数据注入及数据监听操作，该钩子的执行意味着vue实例创建 完毕，可以进行数据的访问操作。

---

挂载阶段

生命周期的第二步是挂载并渲染。

beforeMount
在created之后，vue会判断实例中是否含有el属性，如果没有会调用vm.$mount(el) ,接着会判断是否含有template属性，如果有将其解析为一个render function ，如果没有将el指定的外部html进行解析。这里只是完成了模板的解析但是数据并没有绑定到模板中。

mounted
创建vm.$el替换el，实际上这里完成的是数据绑定操作，在期间执行了render函数，将模板进行了解析，将数据进行了动态绑定。

---

更新阶段

截止到现在，vue已经将页面显示了出来。随着用户的操作会引起数据改变进而导致页面刷新。

beforeUpdate
更新虚拟dom节点。

updated
完成了页面的重新渲染。

---

销毁阶段

beforeDestroy
销毁之前调用，此时还是可以访问vue实例的。

destroyed
完成了监听器，子组件，事件监听等移除，销毁vue实例对象。