Vue生命周期

生命周期是什么

vue的生命周期是Vue 实例从创建到销毁的过程；

开始创建-->初始化数据-->编译模块-->挂载dom渲染页面-->更新dom渲染页面—>卸载。

生命周期钩子函数：组件不同阶段会触发相应的钩子函数

vue中的生命周期

共有8+2个钩子函数 基本的有8个，keep-alive中有2个

beforeCreate（创建前） / created（创建后）

beforeMount（挂载前） / mounted（挂载后）

beforeUpdate（更新前）/ updated（更新后）

beforeDestroy（销毁前）/ destroyed（销毁后）

其中第一次加载页面会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

另外在keep-alive中，vue新增了两个钩子函数

• activated：因为使用了keep-alive的组件会被缓存，所以created,mounted这种的钩子函数只会执行一次， 如果我们的子组件需要在每次加载（组件激活）的时候进行某些操作，可以使用activated钩子触发。

• deactivated：组件失活时使用。

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

• 加载渲染过程：

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

• 子组件更新过程：

父beforeUpdate->子beforeUpdate->子updated->父updated

• 父组件更新过程：

父beforeUpdate->父updated

• 销毁过程：

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

在什么阶段才能访问操作DOM

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

在哪个生命周期内调用异步请求

可以在钩子函数 created、beforeMount、mounted 中进行异步请求，因为在这三个钩子函数中，data已经创建，可以将服务器端返回的数据进行赋值。

如果异步请求不需要依赖 DOM 推荐加载 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面loading时间；

• ssr 不支持 beforeMount、mounted 钩子函数，所以放在 created 中有助于一致性。