vue组件的生命周期

vue组件的生命周期

1、组件的生命周期

• 生命周期，即从被创建到运行再到销毁的一个周期
• 在不同的阶段，会自动运行不同的函数（如果没有写默无操作），被称为生命周期钩子，让开发者有机会在特定阶段运行自己的代码。
• 由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行

2、生命周期函数

• 创建阶段：
  • beforeCreate：实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用
  • created：
    • 响应式数据、计算属性、方法和侦听器已经初始化完成；此时挂载阶段还未开始
    • 可以在这个阶段调用methods中的方法，请求服务器数据；把请求的数据，转到data中，供template模板渲染的时候用（常用）
  • beforeMount：已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
  • mounted：
    • 所有同步子组件都已经被挂载，自身的 DOM 树已经创建完成并插入了父容器中
    • 如果要操作DOM元素，最早只能在mounted阶段执行（常用）
• 组件运行阶段：
  • beforeUpdate：
    • 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用（可以理解为当页面的数据即将发生改变之前会被调用）
    • 可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的
  • updated：
    • 组件因为一个响应式状态变更而更新其 DOM 树之后调用
    • 当数据变化之后，为了操作最新的dom结构可以调用（常用）
    • 注意：如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代；不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环
• 组件的销毁阶段：
  • beforeUnmount：在一个组件实例被卸载之前调用
  • unmounted：
    • 在一个组件实例被卸载之后调用
    • 可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

3、生命周期图示

更多信息可以在vue.js官方文档中查看：vue.js生命周期钩子
下面是vue.js官方文档中的生命周期图示：可以结合图片，更好的理解生命周期函数