Vue3钩子函数用法介绍

一、前言

Vue是一款流行的前端框架，它提供了丰富的生命周期钩子函数用于管理组件的生命周期。钩子函数是在特定的生命周期阶段被调用的函数，通过钩子函数，我们可以在组件的不同阶段执行一些操作。

随着Vue的发展，Vue3作为Vue的最新版本，也带来了新的钩子函数。本文将详细介绍Vue3中的钩子函数用法，帮助读者更好地理解和应用Vue3中的生命周期。

二、Vue3中的钩子函数

Vue3中的钩子函数可以分成三类：

创建阶段钩子函数：beforeCreate、created、beforeMount、mounted。
更新阶段钩子函数：beforeUpdate、updated。
销毁阶段钩子函数：beforeUnmount、unmounted。

下面将分别详细介绍这些钩子函数的用法。

2.1 创建阶段钩子函数

2.1.1 beforeCreate

在组件实例被创建时，即组件的数据对象初始化之后，但是组件实例被创建之前调用。此时，组件的数据对象、计算属性、方法等还未初始化。

const App = {
  beforeCreate() {
    console.log('beforeCreate');
  },
};

Vue.createApp(App).mount('#app');

代码执行结果：

beforeCreate

2.1.2 created

在组件实例被创建后调用。此时，组件的数据对象已经初始化完成，可以访问组件的数据、计算属性、方法等。

const App = {
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  created() {
    console.log('created', this.message);
  },
};

Vue.createApp(App).mount('#app');

代码执行结果：

created Hello Vue!

2.1.3 beforeMount

在组件挂载之前调用。此时，组件的模板已经编译完成，但是还未渲染成真实的DOM。

const App = {
  template: '<div>{{ message }}</div>',
  beforeMount() {
    console.log('beforeMount');
  },
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
};

Vue.createApp(App).mount('#app');

代码执行结果：

beforeMount

2.1.4 mounted

在组件挂载到真实的DOM之后调用。此时，组件已经完成了初始化，可以获取真实的DOM元素。

const App = {
  template: '<div>{{ message }}</div>',
  mounted() {
    console.log('mounted', this.$el.textContent);
  },
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
};

Vue.createApp(App).mount('#app');

代码执行结果：

mounted Hello Vue!

2.2 更新阶段钩子函数

2.2.1 beforeUpdate

在组件更新之前调用。此时，组件的数据已经被更改，但是DOM还未更新。

const App = {
  template: '<div>{{ message }}</div>',
  beforeUpdate() {
    console.log('beforeUpdate', this.message);
  },
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  mounted() {
    setTimeout(() => {
      this.message = 'Hello Updated Vue!';
    }, 1000);
  },
};

Vue.createApp(App).mount('#app');

代码执行结果：

beforeUpdate Hello Vue!

2.2.2 updated

在组件更新之后调用。此时，组件的数据已经更新，并且DOM也已经更新完成。

const App = {
  template: '<div>{{ message }}</div>',
  updated() {
    console.log('updated', this.message);
  },
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  mounted() {
    setTimeout(() => {
      this.message = 'Hello Updated Vue!';
    }, 1000);
  },
};

Vue.createApp(App).mount('#app');

代码执行结果：

updated Hello Updated Vue!

2.3 销毁阶段钩子函数

2.3.1 beforeUnmount

在组件被卸载之前调用。可以在该钩子函数中执行一些清理操作，如清除定时器、取消订阅等。

const App = {
  template: '<div>{{ message }}</div>',
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  mounted() {
    setTimeout(() => {
      this.$destroy();
    }, 1000);
  },
};

Vue.createApp(App).mount('#app');

代码执行结果：

beforeUnmount

2.3.2 unmounted

在组件被卸载之后调用。此时，组件已经被销毁，无法再访问组件的数据、方法等。

const App = {
  template: '<div>{{ message }}</div>',
  unmounted() {
    console.log('unmounted');
  },
  data() {
    return {
      message: 'Hello Vue!',
    };
  },
  mounted() {
    setTimeout(() => {
      this.$destroy();
    }, 1000);
  },
};

Vue.createApp(App).mount('#app');

代码执行结果：