对Vue生命周期的理解

废话不多说直接上表格分析

8个生命周期的描述以及适用场景

生命周期	描述	场景
beforeCreate	组件实例被创建之前	组件实例未被创建,通常用于插件开发中进行舒适化任务
created	组件实例已经被创建	组件初始化完毕,各种数据可以用,常用于异步数据请求
beforeMount	组件挂载之前	dom未创建
mounted	组件挂载完成	初始化结束,dom已创建,可用于获取访问数据和dom元素
deforeUpdate	组件数据更新前	用于获取更新前的状态
updated	组件数据更新后	获取最新状态
deforeDestroy	销毁前	用于一些定时器和订阅的取消
destroy	组件已销毁	用于一些定时器和订阅的取消

具体分析

beforeCreate -> created

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

• 完成数据观测，属性与方法的运算，watch、event事件回调的配置

• 可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算

• 此时vm.$el 并没有被创建

created -> beforeMount

• 判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
• 优先级：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和Mounted的区别

created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成,mounted是在页面dom节点渲染完毕之后就立刻执行的,触发时机上created是比mounted要更早的。
两者相同点：都能拿到实例对象的属性和方法

讨论这个问题本质就是触发的时机，放在mounted请求有可能导致页面闪动（页面dom结构已经生成），但如果在页面加载前完成则不会出现此情况

建议：放在create生命周期当中