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