vue生命周期

vue生命周期

如果你的技术栈是vue的话，vue面试时，面试官会问：请说一下vue的生命周期，这时应该怎么回答呢？

vue的创建有一个完整的生命周期，分为四个阶段， 创建（beforeCreated，created），挂载（beforeMounted， mounted），更新（beforUpdate， updated），销毁（beforeDestroy，destroyed）。

首先创建vue实例，

beforeCreated	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
Created	完成数据观测，属性与方法的运算，watch、event事件回调的配置，可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算，但是此时vm.$el 并没有被创建

此时判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译,有则判断是否有模板， 有则将模板转为render函数，通过render函数去渲染创建dom树， 无模板则将$el最外层的html作为模板

beforeMounted	在此阶段可获取到vm.el此阶段vm.el(虚拟)虽已完成DOM初始化，但并未挂载在el选项上
mounted	此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM
beforUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy	实例被销毁前调用，此时实例属性与方法仍可访问
destroyed	完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器并不能清除DOM，仅仅销毁实例