vue生命周期

1、vue声明周期及生命周期函数

vue声明周期

每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程；

生命周期：是指从创建、运行、销毁整个阶段，强调一个时间段；
生命周期函数：是vue框架提供的内置函数，伴随组件的生命周期，自动按次序执行。强调的为时间点；

vue生命周期函数

• beforeCreate：data、methods均取不到，实例初始化之后，数据观测和事件配置前被调用；
• created：最早可以获取到data和methods方法的生命周期，但挂载还未开始，可获取原本HTML上的直接加载出来的DOM，但是无法获取到通过挂载模板生成的DOM（例如：v-for循环遍历Vue.list生成li）；调用数据、方法、异步函数均可在此完成；
• beforeMount：挂载前被调用，data、methods均可获取，v-for遍历渲染的dom无法获取；
• Mounted：挂载完成
• beforeUpdate：虚拟DOM重新渲染和打补丁之前；
• updated：虚拟dom渲染完成
• beforeDestroy：实例销毁之前调用
• destroyed：实例销毁之后调用，时间、监听均被移除，子实例销毁。
  

问答一：created和mounted的区别

• created一般是在html渲染前的操作，此时el还是undefined，data已经存在。这里不能对DOM进行操作；
• mounted一般是在HTML渲染完成后的操作，此时el，data都已经加载完成，一般对DOM的操作都写在mounted中，例如获取innerHTML，初始化echarts的时候。

问答二：第一次页面加载会触发的钩子

beforeCreate、created、beforeMount、Mounted；

问答三：vue获取数据在那个生命周期函数中获取

vue获取数据时created、beforeMount、Mounted三个生命周期函数均可；如果要操作DOM，要在mounted声明周期函数中。

2、父子组件的生命周期执行顺序

加载过程执行顺序

父beforeCreate 》 父created 》 父beforeMount 》 子bereforeCreate 》 子created 》 子beforeMound 》 子mounted 》 父mounted

父子组件更新执行顺序

父beforeUpdate 》 子beforeUpdate 》 子updated 》 父updated

父子组件销毁执行顺序

父beforeDestroy》 子beforeDestroy》 子destroyed》 父destroyed