Vue中常用钩子函数(生命周期、路由拦截等)执行顺序

一、生命周期函数

1. beforeCreated : 完成Vue实例化对象的创建，this能访问到当前实例化对象，但this.$data访问不到当前组件data定义的数据
2. created: model数据层初始化，data，props设置数据劫持，methods代理在vue实例上，computed，watch封装成不同类型的watcher，this.$data能够访问到定义的数据和方法
3. beforeMount: 将template模板编译成render函数，进行dom渲染，此时未挂载到$el控制的dom元素上
4. mounted: 将渲染好的dom元素，挂载到$el控制的dom元素，即替换掉项目入口文件index.html中id值为app的div。（注：所涉及页面的dom操作都必须在此钩子函数里执行，在这里dom渲染、挂载完成才能获取到dom元素，但不一定保证所有dom渲染完成，为什么这样说呢？例如：实际开发中，我们都会在created里进行数据初始化工作，调取接口数据，拿到接口数据进行页面用到的data数据更改等工作，因接口请求是异步的，故页面部分静态内容渲染完成时，一些需要等到接口拿到数据后才能去渲染到页面内容可能为完成，即在mounted时还在等待接口是否请求完成，此刻需要接口数据的页面元素dom是为渲染的，获取不到会报错，于是就有个API应运而生，一般在mounted里进行dom操作，我们会在dom操作外层加上如下api，它的作用就是保证所有dom渲染完成才会执行）

this.$nextTick( () => { dom操作 } )

5. beforeUpdate: 只要对页面有影响的数据有改变，都会执行该钩子
6. updated: 数据改变导致对应页面dom元素重新渲染完成后执行，无论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据变更，都会触发重新渲染dom，并在之后调用 updated。可参考下面官方图，数据更新所出现的循环图
7. beforeDestroy: 组件销毁前执行
8. destroyed: 组件销毁后执行
   (注：路由注册中设置keep-alive: true 即缓存的页面没有7、8两个销毁生命周期，会多出10、11两个生命周期)
9. activated: 当前缓存页面路由激活时执行，即每次进入当前路由都会执行
10. deactivated: 当前缓存页面路由停用时执行，即每次离开当前路由都会执行

二、路由拦截

1. beforeRouteEnter: 进入路由前执行，提交当前路由路径时立即执行，进入的路由对应组件未开始实例化、加载等工作，获取实例对象需要在next( vm => { vm })里获取，vm相当于this指向当前组件实例化对象
2. beforeRouteLeave: 离开路由前执行

三、执行顺序

缓冲页面（keep-alive:true）

1. 初次进入页面
   beforeRouteEnter（next()外） → beforeCreate → created → beforeMount → beforeRouteEnter( next()内 ) → mounted → activated → (离开页面时): beforeRouteLeave → deactivated
2. 再次进入页面
   beforeRouteEnter( next()外 ) → beforeRouteEnter( next()内 ) → activated

未缓存页面

beforeRouteEnter（next()外） → beforeCreate → created → beforeMount → beforeRouteEnter( next()内 ) → mounted → beforeRouteLeave → (离开页面时): beforeRouteLeave → beforeDestroy → destroyed