1, 实例,组建通过new Vue() 创造出来之后,会初始化事件和生命周期(init Events & LifeCycle),然后会执行beforeCreate钩子函数,这个时候,数据还没有加载,所以不能访问到数据和真实的DOM,一般不做操作。
2,加载数据,绑定事件(init Injections & Reactivity ), 然后执行created 函数,这个时候已经可以获取到数据,做修改也不会触发updated 函数(倒数第二次做修改也不会触发updated函数),所以一般做数据的初始化。
3,找到组建,实例以及其对应的模板,compile template => 虚拟的DOM,准备放入到render 函数中进行渲染,然后执行beforeMount 函数,在beforeMount 函数中,虚拟的DOM已经创建完成,马上要开始渲染,此时做数据的修改也不会调用其它钩子函数,(最后一次渲染前做数据的修改),这里一般也是可以做数据的初始化。
4,然后就是执行render 函数,渲染出真实的DOM,执行mounted 钩子函数,所有的数据全部挂载,DOM 元素已经渲染在页面中,此时可以操作真实的DOM。
5,当实例或者组建发生变化之后,会立刻执行beforeUpdate 函数,虚拟DOM 会与上一次的虚拟DOM 进行diff 比较,然后重新渲染。
6,数据完成更新之后,会执行update 函数,数据更改,重新render,重新可以操作DOM。
7,当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等。
8,组件的数据绑定、监听...去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以。
Vue 的生命周期共有8个阶段,创建前后,载入前后,更新前后,销毁前后