Vue的生命周期

• beforeCreate：在实例创建之前调用，此时数据观测和事件还未初始化。
• created：在实例创建完成后调用，可以访问到 data 和 methods 等选项，但尚未挂载到 DOM 上。
• beforeMount：在组件挂载之前调用，此时模板编译已完成，但尚未将组件渲染到页面上。
• mounted：在组件挂载完成后调用，此时组件已经被渲染到页面上，可以进行 DOM 操作和发送异步请求。
• beforeUpdate：在数据更新之前调用，即响应式数据发生变化时。
• updated：在数据更新完成后调用，此时 DOM 已经重新渲染完成。
• beforeDestroy：在组件销毁之前调用，可以进行清理工作，如解绑自定义事件、
• destroyed

具体分析

beforeCreate

• 在实例创建之前调用，此时数据观测和事件还未初始化。

beforeCreate -> created

• 初始化vue实例，进行数据观测

created

• 完成数据观测，属性与方法的运算，watch、event事件回调的配置
• 可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算
• 此时vm.$el 并没有被创建

created -> beforeMount

• 判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
• 开始编辑模板，执行Vue中的指令，在内存中生成一个编译好的模板字符串，然后把这个模板字符串渲染为内存中的DOM，此时只在内存中，渲染好了模板，并未把模板挂载到页面中去。
• 优先级：render > template > outerHTML
• vm.el获取到的是挂载DOM的

beforeMount

• 在此阶段可获取到vm.el
• 此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上

beforeMount -> mounted

• 此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

mounted

• vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM

beforeUpdate

• 更新的数据必须是被渲染在模板上的（el、template、render之一）
• 此时view层还未更新
• 若在beforeUpdate中再次修改数据，不会再次触发更新方法

updated

• 完成view层的更新
• 若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）

beforeDestroy

• 实例被销毁前调用，此时实例属性与方法仍可访问

destroyed

• 完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
• 并不能清除DOM，仅仅销毁实例

四、题外话：数据请求在created和mouted的区别

created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成；mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的

两者的相同点：都能拿到实例对象的属性和方法。 讨论这个问题本质就是触发的时机，放在mounted中的请求有可能导致页面闪动（因为此时页面dom结构已经生成），但如果在页面加载前完成请求，则不会出现此情况。建议对页面内容的改动放在created生命周期当中。