《Vue.js 生命周期全解析：从创建到销毁的每一步》

《Vue.js 生命周期全解析：从创建到销毁的每一步》

1. Vue 生命周期概述

Vue 生命周期可以分为以下几个阶段：

• 创建阶段：Vue 实例被创建和挂载到 DOM 上的过程。
• 更新阶段：当数据变化时，Vue 实例会重新渲染，更新视图。
• 销毁阶段：当 Vue 实例被销毁时，会进行资源清理。
• 每个阶段中，Vue 都提供了一些钩子函数，允许开发者在这些阶段执行自定义逻辑。

2. 生命周期钩子函数

生命周期钩子函数图示

在 Vue 实例的生命周期中，钩子函数的调用顺序如下图所示：

rust
beforeCreate -> created -> beforeMount -> mounted
     |              |                 |
  Data初始化    组件实例化    DOM挂载完毕    更新数据...

钩子函数的详细解释

以下是 Vue 实例生命周期的主要钩子函数及其描述：

生命周期钩子	触发时机	使用场景
beforeCreate	在实例创建之后，数据观测和事件/生命周期设置之前触发	通常不在此钩子中进行操作，因数据不可用
created	在实例创建后，数据观测、事件/生命周期已设置完成之后触发	在此钩子中，可以访问数据、事件、计算属性等
beforeMount	在挂载开始之前触发，相关的 render 函数首次被调用	可以用来进行初始化操作或改变 props 值
mounted	在 DOM 挂载完成后触发，视图已渲染，$el 可以访问到	可用于执行 DOM 操作或发起 HTTP 请求
beforeUpdate	当数据更新时，视图重新渲染之前触发	可用于操作即将更新的 DOM，进行一些清理工作
updated	在数据更新并且视图重新渲染后触发	可用于进行后续操作，例如与第三方库交互
beforeDestroy	在实例销毁之前触发	可以用于清理定时器、取消订阅等操作
destroyed	实例销毁后触发	用于清理资源或执行销毁后的操作，如移除事件监听器等

3. 各生命周期钩子的代码示例

beforeCreate

beforeCreate 钩子在 Vue 实例初始化时调用，此时无法访问到数据、计算属性、事件等。

new Vue({
  beforeCreate() {
    console.log('beforeCreate: 实例创建之前');
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

created

created 钩子在实例被创建后、数据观测和事件/生命周期设置完成之后被调用，此时可以访问到数据、计算属性、事件等。

new Vue({
  created() {
    console.log('created: 实例创建完成，数据可用');
    console.log(this.message); // 'Hello Vue!'
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

beforeMount

beforeMount 钩子在挂载开始之前被调用，这时候模板已经编译好，但尚未插入到 DOM。

new Vue({
  beforeMount() {
    console.log('beforeMount: 模板挂载之前');
  },
  mounted() {
    console.log('mounted: DOM 已挂载');
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

mounted

mounted 钩子在 DOM 挂载完成之后调用，可以在此处执行一些需要 DOM 交互的操作，如设置定时器或访问 DOM 元素。

new Vue({
  mounted() {
    console.log('mounted: DOM 挂载完成');
    document.getElementById('app').style.color = 'red';
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

beforeUpdate

beforeUpdate 钩子在数据变化并且视图重新渲染之前调用，可以在此时进行一些准备工作。

new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
  },
  updated() {
    console.log('updated: 数据更新后');
  }
});

updated

updated 钩子在数据更新并且 DOM 更新后调用。这个钩子常用于更新第三方库，或者进行一些渲染后的操作。

new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  updated() {
    console.log('updated: 数据更新后');
  }
});

beforeDestroy

beforeDestroy 钩子在 Vue 实例销毁之前调用，适合进行资源清理工作，如清除定时器、移除事件监听器等。

new Vue({
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁前');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
});

4. 生命周期钩子总结

生命周期钩子	描述	触发时机
beforeCreate	实例创建前，无法访问数据和事件	在实例初始化时触发
created	实例创建后，数据可访问，事件、生命周期已设置	实例已创建，数据初始化完成之后
beforeMount	在挂载开始前，render 函数首次被调用	组件实例化后但 DOM 尚未挂载前
mounted	DOM 挂载完成后	DOM 完全挂载，组件显示到页面上
beforeUpdate	数据更新后，DOM 更新前	数据发生变化之前，视图未重新渲染
updated	数据更新并且视图重新渲染后	数据更新并重新渲染之后
beforeDestroy	实例销毁前	用于清理工作（例如移除事件监听器）
destroyed	实例销毁后	实例销毁之后，适合做销毁后的清理工作，例如移除定时器、事件监听等

5. 总结

Vue 的生命周期钩子函数提供了丰富的操作点，允许开发者在不同的阶段插入自定义逻辑。理解生命周期钩子的触发顺序和适用场景，有助于编写高效、可维护的 Vue 应用。通过本文对 Vue 生命周期的讲解，相信你对 Vue 实例的创建、更新和销毁过程有了更清晰的了解。