当前位置：首页 > news >正文

vue 入门：生命周期

news 来源：原创 2025/9/6 14:30:12

文章目录

vue组件的生命周期
- 创建阶段
- 更新阶段
- 销毁阶段
- 生命周期钩子函数

vue组件的生命周期

创建阶段、销毁阶段：只会执行一次
更新阶段：会执行多次

创建阶段

在这里插入图片描述
beforeCreate
在实例初始化之后，数据观测（data observer）和事件配置之前被调用。此时，data 和 methods 中的属性都还未初始化，因此无法访问。
应用场景：通常用于初始化一些不依赖于数据的变量或配置。

created
在实例创建完成后被调用。此时，data 和 methods 已经初始化完成，但 DOM 还未挂载，不能访问到 DOM 元素。
应用场景：适合进行数据初始化、API 请求等操作，但不涉及 DOM 操作。

beforeMount
在挂载开始之前被调用，此时模板已经被编译，但尚未挂载到 DOM 上。可以访问到 this.$el，但 this.$el 还没有被挂载到页面上。
应用场景：适合在挂载之前对模板进行最后的调整。

mounted
在挂载完成后被调用，此时组件已经挂载到 DOM 上，可以访问到 this.$el。
应用场景：适合进行 DOM 操作、绑定事件监听器、调用第三方库等。

更新阶段

在这里插入图片描述
beforeUpdate
在数据更新之前被调用，此时组件的 DOM 还未更新，但数据已经发生变化。
应用场景：适合在更新之前进行一些性能优化或数据校验。

updated
在数据更新完成后被调用，此时组件的 DOM 已经更新。
应用场景：适合在更新完成后进行 DOM 操作或清理工作

销毁阶段

在这里插入图片描述
beforeDestroy（Vue 2.x）/ beforeUnmount（Vue 3.x）
在销毁之前被调用，此时组件仍然可用，但即将被销毁。
应用场景：适合进行清理工作，如解绑事件监听器、清除定时器等。

destroyed（Vue 2.x）/ unmounted（Vue 3.x）
在销毁完成后被调用，此时组件已经完全销毁，无法再访问。
应用场景：通常用于调试或日志记录。

生命周期钩子函数

Clock.vue

<template><div>{{ log("render") }}{{ now }}<button @click="start = !start">{{ start ? "停止" : "开始" }}</button></div>
</template>
<script>
import moment from "moment";export default {data: function () {console.log("data");this.moment = moment;this.log = window.console.log;return {now: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),start: false};},watch: {start() {this.startClock();}},// 创建阶段 startbeforeCreate() {console.log("beforeCreate");},created() {console.log("created");},beforeMount() {console.log("beforeMount");},mounted() {console.log("mounted");this.startClock();},// 创建阶段 end// 更新阶段 startbeforeUpdate() {console.log("beforeUpdate");},updated() {console.log("updated");},// 更新阶段 end// 销毁阶段 startbeforeDestroy() {console.log("beforeDestroy");clearInterval(this.clockInterval);},destroyed() {console.log("destroyed");},// 销毁阶段 endmethods: {startClock() {clearInterval(this.clockInterval);if (this.start) {this.clockInterval = setInterval(() => {this.now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");}, 1000);}}}
};
</script>

index.vue

<template><div><a-tabs><a-tab-pane key="clock" tab="时钟"><button @click="destroyClock = !destroyClock">{{ destroyClock ? "加载时钟" : "销毁时钟" }}</button><Clock v-if="!destroyClock"/></a-tab-pane></a-tabs></div>
</template>
<script>
import Clock from "./Clock";export default {components: {Clock},data() {return {destroyClock: false,name: "vue"};}
};
</script>