框架篇-面试题6-说一下Vue2与Vue3的钩子函数

news2025/1/11 2:00:36

Vue钩子函数是在Vue实例从创建到销毁的过程中自动执行的函数（在特定的阶段,能够自动自执行的函数）

钩子函数用来描述一个组件从引入(创建)到退出(销毁)的全过程中的某个过程

Vue2生命周期钩子函数

整个过程称为生命周期Vue钩子函数按照组件生命周期的过程分为挂载阶段,更新阶段和销毁阶段

beforeCreate():在new一个Vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建,在此生命周期执行的时候,data和methods中的数据都没有初始化
created():在示例创建完成之后,数据已经准备好,但是挂载DOM节点还没有开始,此时无法访问DOM节点
beforeMount():在挂载开始之前被调用,render函数首次被调用,在此时,模板编译成了render函数,但是还没有渲染成真实的DOM节点
mounted():在挂载完成后被调用,此时DOM节点已经全部渲染完毕,可以在这个钩子函数中操作DOM节点,例如获取元素的大小和位置等
beforeUpdate():在数据更新之前被调用,可以在此时对更新前的数据进行操作,但此时还无法访问到更新后的数据
updated():在数据更新后被调用,DOM已经被重新渲染,可以在此时对DOM进行操作,但是需要注意避免无限循环的情况
beforeDestory():在实例销毁之前被调用,可以在此时进行一些清理工作,例如：清除定时器或取消事件监听等
destroyed():在实例销毁之后被调用,此时实例中的所有东西都已经被销毁,无法在访问到实例中的数据和方法

在父子组件中,钩子函数的执行顺序如下所示

挂载阶段: 父beforeCreate > 父created > 子beforeCreate > 子created > 子beforeMount > 子mounted > 父mounted
更新阶段:父beforeUpdate > 子beforeUpdate > 子updated >父updated
销毁阶段: 父beforeDestory > 子beforeDestory > 子destoryed > 父destoryed

总之,Vue钩子函数是,在特定阶段,能够自动执行的函数,例如:在数据更新后对DOM进行操作或在实例销毁前进行一些清理工作

Vue3生命周期钩子函数

Vue3的生命周期钩子函数和Vue2的生命周期选项是很相似的，但是Vue3中的生命周期钩子函数被命名为“钩子”，并且使用了Composition API的方式来实现。以下是Vue3的钩子函数：

setup()：在组件创建之前执行，相当于Vue2中的beforeCreate和created钩子函数，用于创建组件的data和method,它是在beforeCreate之前就执行了的

onBeforeMount()：在组件挂载到节点上之前执行的函数，相当于Vue2中的beforeMount钩子函数。
onMounted()：在组件挂载完成后执行的函数，相当于Vue2中的mounted钩子函数。
onBeforeUpdate()：在组件更新之前执行的函数，相当于Vue2中的beforeUpdate钩子函数。
onUpdated()：在组件更新完成之后执行的函数，相当于Vue2中的updated钩子函数。
onBeforeUnmount()：在组件卸载之前执行的函数，相当于Vue2中的beforeDestroy钩子函数。
onUnmounted()：在组件卸载完成后执行的函数，相当于Vue2中的destroyed钩子函数。 onActivated()：在组件被包含在<keep-alive>中，并且被激活时执行。除了以上的钩子函数之外，Vue3还提供了一些额外的钩子函数，如onRenderTriggered和onRenderTracked，用于在开发过程中进行调试。

在Vue3中，可以使用<script setup>语法糖来定义组件的逻辑。使用<script setup>可以让代码更加简洁，阅读性更高。同时，Vue3还引入了自定义Hooks的概念，可以将一些逻辑抽象出来，实现代码的复用。

Vue3的生命周期钩子函数和Vue2的生命周期选项是如何合并在一起的呢？实际上，在Vue3的内部实现中，会将Vue3的钩子函数转换为Vue2的生命周期选项。具体来说，Vue3的钩子函数会被注册到Vue2的生命周期选项中,如下所示

function registerLifecycleHook(
    register: Function,
    hook?: Function | Function[]
  ) {
    if (isArray(hook)) {
      hook.forEach(_hook => register(_hook.bind(publicThis)))
    } else if (hook) {
      register((hook as Function).bind(publicThis))
    }
  }

在上面的代码中，registerLifecycleHook函数会将Vue3的钩子函数注册到Vue2的生命周期选项中。如果钩子函数是一个数组，那么会循环注册每一个钩子函数；如果钩子函数不是一个数组，那么只会注册一个钩子函数

Vue的钩子函数在Vue里面是一个很重要的知识点,以上是Vue2.0与Vue3.0生命周期

在哪个生命周期钩子函数里面处理什么业务逻辑,做什么事是非常重要的

用ChatGPT做了个App

2023-03-04