Vue 2 生命周期函数详解

引言

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。理解 Vue 的生命周期函数（Lifecycle Hooks）对于开发高效的 Vue 应用至关重要。本文将详细介绍 Vue 2 的生命周期钩子、每个阶段的作用及其代码示例，帮助读者更好地掌握这一重要概念。

1. Vue 生命周期概述

Vue 实例从创建到销毁经历了一系列的阶段，这些阶段被称为生命周期。在每个阶段，Vue 提供了相应的钩子函数（Lifecycle Hooks），允许开发者在特定的时间点执行自定义逻辑。

以下是 Vue 2 的生命周期图：

(new) --> init() --> beforeCreate() --> created() --> beforeMount() --> mounted()
                   |                        |
                   v                        v
             (data observer)         (render DOM)
                   |                        |
                   v                        v
                updated()               beforeUpdate()
                   |                        |
                   v                        v
                 destroyed()           beforeDestroy()

2. 常见的生命周期钩子

a. beforeCreate

• 描述：实例刚刚被创建，数据观测（data observer）、属性和方法的运算还未开始，el 和 data 属性都未初始化。
• 使用场景：很少在这个阶段做操作，因为此时无法访问数据和 DOM。

b. created

• 描述：实例已完成数据观测，属性和方法的运算，data 已经初始化，但还没有挂载到 DOM 上。
• 使用场景：适合进行异步数据获取或初始化状态。

示例代码：

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  created() {
    console.log('created:', this.message);
    // 在这里可以发起异步请求，获取数据
  }
});

c. beforeMount

• 描述：在挂载开始之前被调用，相关的 el 和 template 已经编译为虚拟 DOM，但尚未渲染到页面上。
• 使用场景：可以在渲染之前修改数据或虚拟 DOM。

d. mounted

• 描述：实例已经挂载到真实的 DOM 上，此时可以访问到 DOM 元素。
• 使用场景：适合初始化第三方库、绑定事件监听器等需要操作真实 DOM 的场景。

示例代码：

new Vue({
  el: '#app',
  mounted() {
    console.log('mounted:', this.$el);
    // 初始化第三方库，如 jQuery 插件
  }
});

e. beforeUpdate

• 描述：数据更新时调用，在此期间你可以访问旧的 DOM 状态。
• 使用场景：适合在数据更新前进行一些处理，比如取消不必要的网络请求。

f. updated

• 描述：由于数据更改导致的视图更新完成后调用。注意，这时不应该在此钩子中进一步更改状态，否则会导致递归调用。
• 使用场景：适合在视图更新后执行的操作，例如操作新增的 DOM 元素。

示例代码：

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    changeMessage() {
      this.message = 'Updated Message';
    }
  },
  updated() {
    console.log('updated:', this.message);
    // 不要在 updated 中改变 state，以免造成递归更新
  }
});

g. beforeDestroy

• 描述：实例即将被销毁之前调用。在这一步，实例仍然是完全可用的。
• 使用场景：适合清理定时器、解绑事件监听器等资源释放操作。

h. destroyed

• 描述：实例销毁后调用。此时所有的指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
• 使用场景：确保所有资源都被正确释放，避免内存泄漏。

示例代码：

new Vue({
  data: {
    timer: null
  },
  created() {
    this.timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    console.log('Timer cleared before destruction.');
  },
  destroyed() {
    console.log('Instance has been destroyed.');
  }
});