Vue.js 生命周期

在 Vue.js 中，生命周期是指组件从创建、挂载、更新到销毁的整个过程中所经历的一系列阶段。理解生命周期对于编写高效、可靠的 Vue 组件至关重要。

一、Vue.js 生命周期的主要阶段

1. beforeCreate（创建前）
   在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时组件实例还未创建完成，无法访问 data、computed 和 methods 等属性。

2. created（创建完毕）
   在实例创建完成后被立即调用。此时已完成数据观测，属性和方法已被配置完毕，但尚未挂载到 DOM 上，所以无法操作 DOM 元素。可以在这里进行一些数据初始化、发送异步请求获取数据等操作。

created() {
  // 发送异步请求获取数据
  this.$http.get('/api/data').then(response => {
    this.data = response.data;
  });
}

1. beforeMount（挂载前）
   在挂载开始之前被调用，此时模板已经编译完成，但尚未渲染到页面中。

2. mounted（挂载完成）
   在挂载完成后被调用，此时组件已经被渲染到页面中，可以进行一些 DOM 操作和获取 DOM 元素。

mounted() {
  const element = this.$el.querySelector('.my-element');
  // 对获取到的元素进行操作
}

1. beforeUpdate（更新前）
   数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

2. updated（更新完成）
   数据更新完成后调用，此时组件的 DOM 已经更新完成。

3. beforeDestroy（销毁前）
   在实例销毁之前调用，可以在这里进行一些清理操作，如清除定时器、取消订阅事件等。

beforeDestroy() {
  clearInterval(this.timer);
  this.$off('eventName');
}

1. destroyed（销毁完成）
   实例销毁后调用，此时组件的所有资源都已被释放。

二、生命周期钩子的应用场景

1. 数据初始化
   在 created 钩子中进行数据的初始化和异步请求，确保数据准备好后再进行渲染。

2. 操作 DOM
   在 mounted 钩子中获取 DOM 元素并进行相关操作，因为此时组件已经渲染到页面上。

3. 性能优化
   在 beforeUpdate 和 updated 钩子中，可以根据具体需求进行性能优化，例如避免不必要的更新。

4. 资源清理
   在 beforeDestroy 钩子中清理组件使用的资源，防止内存泄漏。

三、示例演示

以下是一个简单的 Vue 组件示例，展示了生命周期钩子的使用：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 组件创建前');
  },
  created() {
    console.log('created: 组件创建完成');
  },
  beforeMount() {
    console.log('beforeMount: 挂载前');
  },
  mounted() {
    console.log('mounted: 挂载完成');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 更新前');
  },
  updated() {
    console.log('updated: 更新完成');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 销毁前');
  },
  destroyed() {
    console.log('destroyed: 销毁完成');
  }
};
</script>