一、Vue 生命周期钩子详解：从创建到销毁的全流程

原创已于 2025-03-05 11:53:55 修改 · 911 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2025-03-05 10:28:37 首次发布

VUE实战专栏收录该内容

19 篇文章

订阅专栏

1. Vue 生命周期的基本概念

Vue.js 是一个渐进式前端框架，其组件化开发模式中，生命周期钩子是控制组件行为的关键机制。组件从创建到销毁的完整流程被划分为四个阶段：

创建阶段：实例初始化
挂载阶段：渲染并插入 DOM
更新阶段：数据变化触发重新渲染
销毁阶段：实例从 DOM 中移除

每个阶段均提供特定钩子函数，允许开发者注入自定义逻辑。

2. 生命周期钩子函数详解

2.1 创建阶段

`beforeCreate`

触发时机：实例创建后，数据观测与事件配置前
特点：此时 this 无法访问数据和方法
使用场景：全局配置初始化

export default {
  beforeCreate() {
    console.log('beforeCreate：组件未初始化');
  }
};

`created`

触发时机：数据观测与事件配置完成后
特点：可访问 this 但未挂载 DOM
使用场景：异步数据加载

export default {
  data() { return { list: [] } },
  created() {
    axios.get('/api/data').then(res => this.list = res.data);
  }
};

2.2 挂载阶段

`beforeMount`

触发时机：模板编译完成但未插入 DOM
特点：可访问 $el 但内容未更新
使用场景：动态修改模板前的预处理

export default {
  beforeMount() {
    this.$options.template = '<div>Custom Template</div>';
  }
};

`mounted`

触发时机：组件 DOM 渲染完成
特点：可操作真实 DOM 元素
使用场景：第三方库初始化

export default {
  mounted() {
    new Chart(this.$refs.canvas, { /* 配置项 */ });
  }
};

2.3 更新阶段

`beforeUpdate`

触发时机：数据变化后 DOM 更新前
特点：可获取更新前的 DOM 状态
使用场景：复杂 DOM 状态保存

export default {
  data() { return { count: 0 } },
  beforeUpdate() {
    this.prevCount = this.count;
  }
};

`updated`

触发时机：数据变化且 DOM 更新完成
注意：避免在此处修改数据导致死循环
使用场景：基于更新后 DOM 的计算

export default {
  updated() {
    const height = this.$refs.container.offsetHeight;
    console.log('容器高度:', height);
  }
};

2.4 销毁阶段

`beforeDestroy`

触发时机：实例销毁前
特点：实例仍可正常使用
使用场景：资源清理

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

`destroyed`

触发时机：实例销毁后
特点：所有子组件已被卸载
使用场景：日志记录

export default {
  destroyed() {
    console.log('组件已销毁');
  }
};

3. 生命周期执行顺序示例

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return { message: '初始值' };
  },
  // 生命周期钩子按此顺序执行
  beforeCreate() { console.log('1. beforeCreate') },
  created() { console.log('2. created') },
  beforeMount() { console.log('3. beforeMount') },
  mounted() { console.log('4. mounted') },
  
  methods: {
    updateMessage() {
      this.message = '更新后的值';
    }
  },
  
  beforeUpdate() { console.log('5. beforeUpdate') },
  updated() { console.log('6. updated') }
};
</script>

执行流程：

组件初始化 → 触发 beforeCreate → created
挂载阶段 → beforeMount → mounted
点击按钮更新数据 → beforeUpdate → updated

4. 生命周期钩子最佳实践

钩子函数	推荐场景	注意事项
`created`	数据初始化、异步请求	避免操作 DOM
`mounted`	DOM 操作、第三方库集成	确保 DOM 已渲染
`beforeUpdate`	保存更新前状态	避免在此修改数据
`beforeDestroy`	清理定时器、取消订阅	确保资源释放干净