vue的生命周期

简介

vue的生命周期大致分为四个过程，分别是创建过程、挂载过程、更新过程、销毁过程，对应 8 个生命周期钩子函数，分别是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed。生命周期就是指 vue实例 从创建到销毁 所经历的这一系列过程。

• beforeCreate：此时生命周期、vue实例的挂载目标 el 和 data 都还未初始化，不能访问data、computed、watch、methods上的数据和方法
• created：此时生命周期、data都已初始化完成，可以访问data、computed、watch、methods上的数据和方法；但vue实例的挂载目标 el 还未初始化完成，所以不能访问dom元素。可在此进行前后端的数据交互，请求后端数据
• beforeMount：在dom节点被挂载之前被调用
• mounted：此时vue实例的挂载目标 el 已经挂载到文档中，可进行dom操作（但子组件可能还未挂载完成，可通过 this.$nextTick(() => {}) 访问子组件）
• beforeUpdate：此生命周期在数据更新时调用，此时dom节点还未更新，可访问更新之前的dom元素
• updated：此时dom节点都已更新，可进行dom操作（同mounted一样，此时子组件可能还未挂载完成），但我们应避免在此期间更改状态，若要相应状态改变，最好使用computed和watch代替
• beforeDestory：实例销毁之前调用，此时实例仍然完全可用；此时会做一些 监听的移除、定时器的移除、事件的解绑 操作
• destoryed：实例销毁之后调用，此时数据和视图的关系将会断开

此外，还新增了三个生命周期：activated、deactivated、errorCaptured

• activated：被 keep-alive 缓存的组件激活时调用（只有被包裹在 keep-alive 中的组件，才有activated生命周期）

• deactivated：被 keep-alive 缓存的组件停用时调用（只有被包裹在 keep-alive 中的组件，才有deactivated生命周期）

• errorCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子函数接收三个参数：错误对象、发生错误的组件实例、一个包含错误来源信息的字符串。它可以返回 false 来阻止该错误继续向上传播

  PS：使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务
  

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

父组件 beforeCreate、父组件 created、父组件 beforeMount、子组件 beforeCreate、子组件 created、子组件 beforeMount、子组件 mounted、父组件 mounted

父组件 beforeUpdate、子组件 beforeUpdate、子组件 updated、父组件 updated

父组件 beforeDestroy、子组件 beforeDestroy、子组件 destroyed、父组件 destroyed