vue的生命周期

前言

Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。Vue 实例在其生命周期中经历不同的阶段，每个阶段都触发特定的钩子函数，使开发者能够在不同的时机执行自定义的逻辑。Vue 的生命周期可以分为创建阶段、更新阶段和销毁阶段。

创建阶段（Creation）

1. beforeCreate（创建前）

• 在实例初始化之后，数据观测（data observer）和事件配置之前被调用。
• 此时实例还未初始化完成，无法访问数据和方法。

2. created（创建后）

• 在实例创建完成后立即调用。
• 可以访问数据和方法，但是模板编译还未开始，DOM 元素还未挂载。

3. beforeMount（挂载前）

• 在挂载开始之前被调用：相关的 render 函数首次被调用。

4. mounted（挂载后）

• el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
• 可以访问到挂载后的 DOM 元素。

更新阶段（Updating）

1. beforeUpdate（更新前）

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

2. updated（更新后）

• 在数据更改导致的重新渲染和打补丁之后调用。
• 可以访问更新后的 DOM 元素。

销毁阶段（Destruction）

1. beforeDestroy（销毁前）

• 在实例销毁之前调用。此时实例仍然完全可用。

2. destroyed（销毁后）

• 在实例销毁后调用。
• 所有的事件监听器被移除，所有的子实例也被销毁。

例子

new Vue({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: ', this.message);
  },
  created() {
    console.log('created: ', this.message);
  },
  beforeMount() {
    console.log('beforeMount: ', this.$el);
  },
  mounted() {
    console.log('mounted: ', this.$el);
  },
  beforeUpdate() {
    console.log('beforeUpdate: ', this.message);
  },
  updated() {
    console.log('updated: ', this.message);
  },
  beforeDestroy() {
    console.log('beforeDestroy: ', this.message);
  },
  destroyed() {
    console.log('destroyed: ', this.message);
  }
});

以上代码演示了 Vue 实例生命周期各个阶段的钩子函数。在实际应用中，可以利用这些钩子函数执行一些初始化、清理、数据请求等操作