Vue的生命周期以及钩子函数

一、首先我们来看一眼官网给出的生命周期图示

图中可以看到vue生命周期大概可以分为八个阶段：创建前、创建后、挂载前、挂载后、更新前、更新后、销毁前、销毁后；所以执行起来也是按照这个顺序去执行的。但是在这几个主要的生命周期之前，vue会在构造函数中调用init方法，将事件、生命周期、依赖注入和响应性确实在组件进行设置和初始化

仔细一看是不是少了什么？

是的，data与methods；是的；data 中的数据和 methods 中的方法在组件实例化阶段被初始化，而在 beforeCreate 和 created 钩子函数中，是可以访问和操作这些数据和方法。methosds中的方法在实例化之后就可以被调用，不需要等到其他生命周期阶段，通常在created钩子函数中，methods中的方法就可以被安全的调用了

二、执行条件以及机制

beforeCreate（创建前）:
- 执行条件： 在实例初始化之后，数据观测和事件配置之前被调用。
- 机制： 此时 Vue 实例已经被创建，但数据和事件还未初始化。
created（创建后）:
- 执行条件： 实例已经创建完成之后被调用。
- 机制： 在这一步，实例已经完成了数据观测、属性和方法的运算，但挂载阶段还没开始，此时 el 属性还不可见。
beforeMount（挂载前）:
- 执行条件： 在挂载开始之前被调用，相关的 render 函数首次被调用。
- 机制： 这是在组件挂载到 DOM 前的最后一个钩子。render 函数将首次被调用，生成虚拟 DOM。
mounted（挂载后）:
- 执行条件： el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。
- 机制： 这个阶段表示组件已经挂载到 DOM 上，可以进行一些 DOM 操作。
beforeUpdate（更新前）:
- 执行条件： 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
- 机制： 在此阶段，数据已经变化，但还未应用到视图上。可以用于执行一些在更新之前需要做的操作。
updated（更新后）:
- 执行条件： 虚拟 DOM 重新渲染和打补丁之后调用。
- 机制： 在这个阶段，组件的 DOM 已经更新，可以执行一些操作，如获取更新后的 DOM 状态。
beforeDestroy（销毁前）:
- 执行条件： 实例销毁之前调用，此时实例仍然完全可用。
- 机制： 在此阶段，可以执行一些清理工作，例如清除定时器、取消订阅等。
destroyed（销毁后）:
- 执行条件： 实例销毁后调用。
- 机制： 在这个阶段，所有的事件监听器被移除，所有的子实例也会被销毁。可以执行一些最终的清理工作。

总体而言，Vue 生命周期的执行条件是在特定的生命周期阶段触发相应的条件，而机制则是在这些阶段执行相应的任务，使开发者能够在组件生命周期的不同阶段执行自定义的代码。这有助于在组件的生命周期中处理不同的业务逻辑。

注：除了这些主要的阶段之外，vue还有一些辅助性的钩子（）：

activated:
- 用于 keep-alive 组件，当组件被激活时调用。
deactivated:

用于 keep-alive 组件，当组件被停用时调用。

这两个钩子主要与组件有关，用户处理被缓存的组件的生命周期

三、监听函数钩子

1、watch 钩子函数的初始化和调用时机：

watch 钩子函数是在组件实例创建时初始化的，通常可以在 created 钩子函数中使用。watch 的初始化用于设置对数据的监听，当被监听的数据发生变化时，相关的回调函数会被执行。
watch 钩子函数的调用时机是在数据变化时，即在 beforeUpdate 和 updated 钩子函数之间。

new Vue({ data() { return { message: 'Hello, Vue!' }; }, watch: { message(newValue, oldValue) { console.log('Message changed:', newValue, oldValue); } }, created() { // watch 钩子函数的初始化 } });

2、computed 属性的 get 和 set 函数的初始化和调用时机：

computed 属性的 get 函数在组件实例创建时初始化，而 set 函数是在给 computed 属性赋值时初始化的。get 函数用于计算属性的值，而 set 函数用于处理属性的变化。
访问 computed 属性时，get 函数会被调用；当对 computed 属性进行赋值时，set 函数会被调用。

new Vue({ data() { return { firstName: 'John', lastName: 'Doe' }; }, computed: { fullName: { get() { return this.firstName + ' ' + this.lastName; }, set(value) { const parts = value.split(' '); this.firstName = parts[0]; this.lastName = parts[1]; } } }, created() { // computed 属性的初始化 console.log(this.fullName); // 调用 get 函数，输出 'John Doe' this.fullName = 'Jane Doe'; // 调用 set 函数 } });

四、路由钩子

钩子函数，这些钩子函数是与 Vue Router 配合使用的。以下是一些主要的辅助性路由钩子函数：

beforeRouteEnter:
- 在路由进入前被调用。在这个钩子中，不能访问 this，但可以通过回调函数访问组件实例。这个钩子在导航被确认之前调用。
beforeRouteUpdate:
- 在当前路由改变，但是该组件被复用时调用。在这个钩子中，可以访问组件实例。
beforeRouteLeave:
- 导航离开该组件的对应路由时调用。在这个钩子中，可以访问组件实例。

这些辅助性路由钩子函数主要用于处理路由相关的逻辑，例如在路由切换前后执行一些特定的操作，或者在路由离开时进行确认等。这些钩子函数是在组件内使用，而不是在组件外部配置。

五、对比一下vue3中的钩子函数

Vue.js 3.x 在生命周期上进行了一些重要的变化，以更好地支持组合式 API、提高性能和可维护性。以下是 Vue.js 2.x 与 Vue.js 3.x 之间生命周期的一些主要差异：

新增的生命周期钩子函数：
- Vue.js 3.x 引入了一些新的生命周期钩子函数，如 beforeUnmount 和 onRenderTracked、onRenderTriggered 等。这些钩子函数主要用于更灵活地处理组件的生命周期事件。
合并的 beforeCreate 和 created 钩子：
- 在 Vue.js 3.x 中，beforeCreate 和 created 这两个钩子函数被合并成一个 setup 钩子。setup 函数返回了组件的初始状态，这使得组合式 API 可以更方便地处理组件的逻辑。
beforeMount 和 mounted 钩子的拆分：
- 在 Vue.js 3.x 中，beforeMount 和 mounted 这两个钩子函数被拆分为 beforeMount 和 onMounted。这样的变化使得 setup 函数中的逻辑更清晰。
beforeUpdate 和 updated 钩子的拆分：
- 同样，beforeUpdate 和 updated 这两个钩子函数被拆分为 beforeUpdate 和 onUpdated。
beforeDestroy 和 destroyed 钩子的拆分：
- beforeDestroy 和 destroyed 这两个钩子函数被拆分为 beforeUnmount 和 onUnmounted。
新的 onBeforeUpdate 钩子：

Vue.js 3.x 引入了一个新的 onBeforeUpdate 钩子函数，用于在数据更新前执行一些逻辑。

其他的辅助性钩子，看起来是没有什么变化的，但是由于 Vue.js 3.x 引入了 setup 函数，可以将这些钩子函数作为 setup 的返回值，以便更好地利用 Composition API。

javascript 复制代码

import { ref, onMounted, onBeforeRouteEnter } from 'vue';

export default {
  setup() {
    const data = ref('Hello, Vue!');

    // 使用 onBeforeRouteEnter 钩子
    onBeforeRouteEnter((to, from, next) => {
      console.log('Before route enter');
      next(vm => {
        // 在这里可以访问组件实例，例如 vm.data
        console.log(vm.data); // 输出 'Hello, Vue!'
      });
    });

    // 使用 onMounted 钩子
    onMounted(() => {
      console.log('Component is mounted');
    });

    return {
      data
    };
  }
};

总的来说，Vue.js 3.x 在生命周期上进行了一些调整，以适应新的组合式 API 和更灵活的开发模式。这些变化主要是为了提供更清晰的生命周期处理、更好的性能以及更强大的功能。如果你正在从 Vue.js 2.x 迁移到 Vue.js 3.x，建议查阅官方文档以获取详细的信息和用法。

总结：

Vue.js 3.x 的生命周期钩子函数相对于 Vue.js 2.x 进行了一些调整，主要是由于引入了 Composition API。这些变化使得开发者能够更灵活地组织和管理组件的状态和行为。