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

引言

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

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

vue的生命周期是什么🤔

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

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

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

四个阶段，每个阶段都有两个钩子函数：

生命周期之间的关系

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

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

拓展之钩子函数🪝：

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

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

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

1. 创建阶段

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

beforeCreate
触发时机 ：实例初始化后，但数据和方法尚未可用。
用途：常用于插件初始化或全局变量设置。

javascript 复制代码

export default {
  beforeCreate() {
    console.log('beforeCreate: 数据和方法还未初始化');
  }
};

created
触发时机 ：实例初始化完成，数据和方法已可用，但 DOM 尚未挂载。
用途：常用于初始化数据或调用后端接口。

javascript 复制代码

export default {
  data() {
    return { message: '' };
  },
  created() {
    console.log('created: 可以访问数据和方法');
    this.message = 'Hello, Vue!';
  }
};

2. 挂载阶段

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

beforeMount
触发时机 ：模板编译完成，但还未挂载到真实 DOM 上。
用途：可以调整数据，但不影响 DOM。

javascript 复制代码

export default {
  beforeMount() {
    console.log('beforeMount: 模板已编译，DOM 尚未更新');
  }
};

mounted
触发时机 ：实例挂载到真实 DOM 后。
用途：常用于初始化第三方插件或直接操作 DOM。

javascript 复制代码

export default {
  mounted() {
    console.log('mounted: DOM 已挂载');
    this.$nextTick(() => {
      console.log('DOM 操作可以在此处完成');
    });
  }
};

3. 运行阶段

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

beforeUpdate
触发时机 ：响应式数据变化，虚拟 DOM 更新前。
用途：适合做更新前的数据快照。

javascript 复制代码

export default {
  data() {
    return { count: 0 };
  },
  beforeUpdate() {
    console.log(`beforeUpdate: count = ${this.count}`);
  }
};

updated
触发时机 ：数据变化后，虚拟 DOM 更新完成。
用途：可以进行与更新后的 DOM 相关的操作。

javascript 复制代码

export default {
  data() {
    return { count: 0 };
  },
  updated() {
    console.log(`updated: count = ${this.count}`);
    this.$nextTick(() => {
      console.log('可以操作已更新的 DOM');
    });
  }
};

4. 销毁阶段

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

beforeDestroy
触发时机 ：实例销毁前，数据和方法仍然可用。
用途：常用于清理定时器或事件监听。

javascript 复制代码

export default {
  data() {
    return { timer: null };
  },
  mounted() {
    this.timer = setInterval(() => console.log('定时器运行中'), 1000);
  },
  beforeDestroy() {
    console.log('beforeDestroy: 清理资源');
    clearInterval(this.timer);
  }
};

destroyed
触发时机 ：实例销毁后，数据和方法已不可用。
用途：清理收尾工作，确认实例已完全移除。

javascript 复制代码

export default {
  destroyed() {
    console.log('destroyed: 实例已销毁');
  }
};

四个阶段的八个钩子函数

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

结语

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