Vue之钩子函数

在Vue.js中，钩子函数（Lifecycle Hooks）是组件生命周期中特定时刻会被调用的函数。通过这些钩子函数，可以在组件的不同阶段执行特定的逻辑。以下是Vue 2和Vue 3中常见的钩子函数：

Vue 2 生命周期钩子

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted：el 被新创建的 vm.替换，并挂载到实例上去之后调用该钩子。如果实例挂载了一个文档内元素，当被调用时el 也在文档内。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue 3 生命周期钩子

Vue 3 的生命周期钩子与 Vue 2 基本相同，但有一些细微的变化和新的钩子：

以下是一个使用 Vue 2 生命周期钩子：

1. beforeCreate 和 created：这两个钩子在 Vue 3 中仍然存在，但通常建议使用 setup 函数来替代。
2. beforeMount 和 mounted：与 Vue 2 相同。
3. beforeUpdate 和 updated：与 Vue 2 相同。
4. beforeUnmount：相当于 Vue 2 中的 beforeDestroy。
5. unmounted：相当于 Vue 2 中的 destroyed。

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

 

在 Vue 3 中，你可以使用 setup 函数来处理生命周期钩子：

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');

    onBeforeMount(() => {
      console.log('onBeforeMount');
    });

    onMounted(() => {
      console.log('onMounted');
    });

    onBeforeUpdate(() => {
      console.log('onBeforeUpdate');
    });

    onUpdated(() => {
      console.log('onUpdated');
    });

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
    });

    onUnmounted(() => {
      console.log('onUnmounted');
    });

    return {
      message
    };
  }
};