✍🏻记与vue生命周期⏱️的一次邂逅(短文📖)

908 阅读3分钟

引言

第一次听到vue的生命周期,发现自己一无所知,所以我决定写一篇文章记录下来,便于以后复习。

Vue 的生命周期是vue的核心知识点之一,不仅是开发中频繁涉及的内容,也是面试中的常见问题。


vue的生命周期是什么🤔

与其说是vue的生命周期,不如说是vue组件的生命周期。在 Vue 中,每个组件都有自己的生命周期,类似于生命的起承转合。组件从被创建,经历数据初始化挂载更新,最后被销毁


vue生命周期的四个阶段和执行顺序

先整体介绍,后文有进一步说明。

四个阶段,每个阶段都有两个钩子函数:

image.png

生命周期之间的关系

  • 创建阶段负责初始化实例。
  • 挂载阶段将实例与 DOM 关联。
  • 运行阶段处理数据变化的响应。
  • 销毁阶段确保资源得到妥善释放。

这些钩子函数的 this 上下文绑定到组件实例,因此开发者可以方便地访问组件的数据和方法。 生命周期方法不能使用箭头函数来定义(如 created: () => {}),否则会导致 this 指向问题,无法正确访问 Vue 实例。

拓展之钩子函数🪝:

Vue 组件在不同生命周期阶段自动调用的特殊方法,用于在组件创建、更新和销毁的过程中执行特定逻辑。

执行顺序,vue实例从创建到销毁的全过程:

image.png


详细解析各个生命周期阶段

1. 创建阶段

创建阶段是 Vue 实例初始化的过程,主要完成数据观察、方法绑定等。

  • beforeCreate
    触发时机:实例初始化后,但数据和方法尚未可用。
    用途:常用于插件初始化或全局变量设置。
export default {
  beforeCreate() {
    console.log('beforeCreate: 数据和方法还未初始化');
  }
};
  • created
    触发时机:实例初始化完成,数据和方法已可用,但 DOM 尚未挂载。
    用途:常用于初始化数据或调用后端接口。
export default {
  data() {
    return { message: '' };
  },
  created() {
    console.log('created: 可以访问数据和方法');
    this.message = 'Hello, Vue!';
  }
};

2. 挂载阶段

挂载阶段是将 Vue 实例与 DOM 关联的过程。

  • beforeMount
    触发时机:模板编译完成,但还未挂载到真实 DOM 上。
    用途:可以调整数据,但不影响 DOM。
export default {
  beforeMount() {
    console.log('beforeMount: 模板已编译,DOM 尚未更新');
  }
};
  • mounted
    触发时机:实例挂载到真实 DOM 后。
    用途:常用于初始化第三方插件或直接操作 DOM。
export default {
  mounted() {
    console.log('mounted: DOM 已挂载');
    this.$nextTick(() => {
      console.log('DOM 操作可以在此处完成');
    });
  }
};

3. 运行阶段

运行阶段是组件响应式数据驱动视图更新的过程。

  • beforeUpdate
    触发时机:响应式数据变化,虚拟 DOM 更新前。
    用途:适合做更新前的数据快照。
export default {
  data() {
    return { count: 0 };
  },
  beforeUpdate() {
    console.log(`beforeUpdate: count = ${this.count}`);
  }
};
  • updated
    触发时机:数据变化后,虚拟 DOM 更新完成。
    用途:可以进行与更新后的 DOM 相关的操作。
export default {
  data() {
    return { count: 0 };
  },
  updated() {
    console.log(`updated: count = ${this.count}`);
    this.$nextTick(() => {
      console.log('可以操作已更新的 DOM');
    });
  }
};

4. 销毁阶段

销毁阶段是 Vue 实例结束生命周期的过程。

  • beforeDestroy
    触发时机:实例销毁前,数据和方法仍然可用。
    用途:常用于清理定时器或事件监听。
export default {
  data() {
    return { timer: null };
  },
  mounted() {
    this.timer = setInterval(() => console.log('定时器运行中'), 1000);
  },
  beforeDestroy() {
    console.log('beforeDestroy: 清理资源');
    clearInterval(this.timer);
  }
};
  • destroyed
    触发时机:实例销毁后,数据和方法已不可用。
    用途:清理收尾工作,确认实例已完全移除。
export default {
  destroyed() {
    console.log('destroyed: 实例已销毁');
  }
};

四个阶段的八个钩子函数

生命周期钩子常见用途示例操作
beforeCreate插件初始化、全局设置初始化配置
created数据初始化、后端接口调用设置 data,发送网络请求
beforeMount数据调整最后修改数据
mounted操作真实 DOM、初始化插件使用第三方库,如 swiper
beforeUpdate数据快照日志记录
updated操作更新后的 DOM修改已更新的 DOM
beforeDestroy清理资源清理定时器、解绑事件监听
destroyed收尾工作确认销毁完成

结语

以上就是我暂时了解的vue生命周期,有所缺漏的地方欢迎大佬补充。🧑🏻‍💻

猫抓爱心.gif