vue 生命周期

2023-04-30 31 阅读2分钟

Vue 的生命周期可以分为创建阶段、更新阶段和销毁阶段，每个阶段都有对应的生命周期钩子函数。以下是具体的生命周期钩子函数：

创建阶段

beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
created：在实例创建完成后被立即调用，此时实例已完成以下的配置：数据观测（data observer）、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用，即将开始编译模板并插入 DOM。
mounted：在挂载完成后被调用，此时模板已经编译完成并且挂载到了 DOM 中。

更新阶段

beforeUpdate：在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated：在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。

销毁阶段

beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。

需要注意的是，钩子函数的执行顺序是固定的，即先创建阶段、后更新阶段、最后销毁阶段。在组件的生命周期中，可以在不同的钩子函数中执行不同的操作，以实现组件的特定行为。同时，也可以在钩子函数中访问组件的数据和方法，以实现组件的特定功能。

时间线

demo

网络请求

在createe阶段网络请求

获取dom 尺寸

在mounted时获取dom 尺寸

destory启动和清除计时器

export default {
  data(){
    return {
      timer: null
    }
  },
  created(){
    this.timer = setInterval(()=>{
     ... 
    }, 1000)
  },
  destroyed(){
    clearInterval(this.timer);             
  }
}