vue2面试题：对vue生命周期的理解

回答思路:生命周期是什么–>生命周期有哪些–>生命周期的总体流程–>数据请求在created和mouted的区别

生命周期是什么

生命周期（life cycle）的概念应用很广泛，在政治、经济、环境、技术、社会等诸多领域都会经常出现，可通俗理解为“从摇篮到坟墓”的整个过程，在vue中从实例的创建到销毁过程就是生命周期，即从创建、初始化数据、编译模板、挂载Dom–>渲染、更新–>渲染、卸载等一系列过程，可以把组件比作工厂的一条流水线，每个工人就是不同的生命周期，站在各自的岗位，执行各自的任务，在vue生命周期钩子会自动绑定this上下文到实例中，因此你可以访问数据，对property和方法进行运算，所以我们不能使用箭头函数来定义生命周期方法

生命周期有哪些

可分为八个阶段，创建前后、挂在前后、更新前后、卸载前后，还有一些特殊场景的生命周期

生命周期	描述
beforeCreate	组件实例被创建之前
created	组件实例已经完全被创建
beforeMount	组件挂载之前
mounted	组件挂载到实例上去之后
beforeUpdate	组件数据发生变化，更新之前
updated	组件数据更新之后
beforeDestroy	组件实例销毁之前
destroyed	组件实例销毁之后
activated	keep-alive缓存的组件激活时调用
deactivated	keep-alive缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用

生命周期的总体流程

beforeCreate–>created:

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

created：

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

created–>beforeMount：

1.判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
2.优先级：render>template>outerHTML
3.vm.el获取到的是挂载的DOM

beforeMount

1.可以获取到vm.el
2.vm.el虽然已初始化，但并未挂载到el上

beforeMount -->mounted

vm.el挂载完毕，vm.$el生成的DOM替换了el选项对应的DOM

mounted

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

beforeUpdate

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

updated

1.完成view层更新
2.若在updated中再次更新则会重新调用beforeUpdate

beforeDestroy

实例被销毁前调用，此时属性和方法还是可以访问

destroy

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

数据请求在created和mouted的区别

相同点：

都能拿到实例对象的属性和方法

区别：

1.created是在组件实例一旦创建完成的时候立刻调用，此时页面dom节点并未生成，mounted是在页面dom节点渲染完毕后执行的，created比mounted先
2.如果请求放在mounted中可能会导致页面闪动，因为此时页面dom结构已经生成，如果在页面加载前完成请求就不会出现这个情况，所以建议请求放在created中