Vue组件的生命周期

组件生命周期

什么是生命周期：从组件创建开始，到组件销毁，所经历的整个过程。

生命周期钩子函数：是在生命周期过程中会被自动调用执行的函数，在这些函数中，我们可以添加一些额外需要执行的任务。

• create 阶段
  • beforeCreate()
  • created()：实例创建后，这时，可以在 vue 实例中调用到 data 中设置的数据了。可以在这个生命周期钩子函数中发起网络请求。
• mount 阶段
  • beforeMount()
  • mounted()：在挂载结束后执行，这时，可以获取到渲染后的实体 DOM 元素了。
• update 阶段
  • beforeUpdate()
  • updated()
• destroy 阶段：
  • 通常会销毁的资源有：定时器、之前注册的事件监听、未完成的异步请求、websocket......
  • beforeDestroy()
  • destroyed()
• keep-alive：
  • <keep-alive> 是 vue 提供的内置组件，用于缓存组件实例（即缓存不活动的组件实例，而不是销毁它们），缓存的组件实例其生命周期 create、destroy 阶段钩子函数不会重复执行。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
  • activated()：当缓存的组件被激活时触发执行
  • deactivated()：当缓存的组件失活时执行

生命周期图示