vuejs的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。下图展示的就是一个vue实例对象的生命周期。

vue-lifecycle.png
3346068135-580822cd52898.png
vuejs生命周期官方地址

它可以总共分为10个阶段：

• 1.beforeCreate（创建前）,
• 2.created（创建后）,
• 3.beforeMount(载入前),
• 4.mounted（载入后）,
• 5.beforeUpdate（更新前）,
• 6.updated（更新后）,
• 7.activated（激活时）
• 8.deactivated（停用时）
• 9.beforeDestroy（销毁前）,
• 10.destroyed（销毁后）

详细解读

• beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象
• created ：数据已经绑定到了对象实例，但是还没有挂载对象
• beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性，$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
• mounted:将$el的内容挂载到了el，相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom，上面我们就会发现dom的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作

当我们的data发生改变时，会调用beforeUpdate和updated方法

• beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
• updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新
• activated ：keep-alive 组件激活时调用。
• deactivated： keep-alive 组件停用时调用。
• beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动