今天的学习依旧是经典面试题，先看知识，再看实际业务场景。

Vue3.x生命周期钩子

1. beforeCreate： 在实例初始化之后，数据观测 (data observer) 和事件/watcher 事件配置之前被调用。
2. created： 在实例创建完成后被立即调用。
3. beforeMount： 在挂载之前被调用，即将开始渲染 DOM。
4. onBeforeMount： Vue 3 中新增的生命周期钩子，与 beforeMount 类似，在挂载之前被调用。
5. mounted： 在挂载完成后被调用，实例已经插入到 DOM 中。
6. onMounted： Vue 3 中新增的生命周期钩子，与 mounted 类似，在挂载完成后被调用。
7. beforeUpdate： 在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。
8. onBeforeUpdate： Vue 3 中新增的生命周期钩子，与 beforeUpdate 类似，在数据更新之前被调用。
9. updated： 在数据更新之后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。
10. onUpdated： Vue 3 中新增的生命周期钩子，与 updated 类似，在数据更新之后被调用。
11. beforeUnmount： 在实例销毁之前被调用。
12. onBeforeUnmount： Vue 3 中新增的生命周期钩子，与 beforeUnmount 类似，在实例销毁之前被调用。
13. unmounted： 在实例销毁后被调用。
14. onUnmounted： Vue 3 中新增的生命周期钩子，与 unmounted 类似，在实例销毁后被调用。

onMounted

addEventListener

在Vue3中，什么时候必须使用addEventListener

1. 给整个文档添加监听

onMounted(() => {
      document.body.addEventListener('click', handleBodyClick)
    })

2. 动态添加事件 (但没有太理解，觉得也是可以用@click替代)

 onMounted(() => {
      if (wrapperRef.value) {
        (wrapperRef.value as Element).addEventListener('click', fn)
      }
    })

发送网络请求

onMounted(async () => {
  const res = await getxxList()
  tableData.value = res.data as SearchResultModel[]
})

onBeforeUnmount销毁之前

removeEventListener

onBeforeUnmount(() => {
      document.body.removeEventListener('click', handleBodyClick)
    })

 onBeforeUnmount(() => {
      if (wrapperRef.value) {
        (wrapperRef.value as Element).removeEventListener('click', fn)
      }
    })

关闭eventBus

 if (eventBus) {
  eventBus.on('fn', fn)
  onBeforeUnmount(() => {
    eventBus.off('fn', fn)
  })
}

自定义资源，如清理定时器

最早发送网络请求是created还是onMounted

1. 请求是否依赖于 DOM 元素

   • created 钩子在组件实例创建后立即调用，此时组件的 DOM 元素还没有被挂载到页面上。如果你的请求不依赖于 DOM 元素，可以在这里发起。
   • onMounted 钩子在组件的 DOM 元素已经挂载到页面上后调用，通常用于执行需要访问 DOM 元素的操作。如果你的请求需要获取或操作页面上的元素，可以在这里发起。

2. 首次渲染性能优化使用onMounted

   • 有时为了提高首次渲染的性能，可以在组件加载前只加载必要的数据，而将其他数据的请求推迟到 onMounted 钩子中。
   • 这可以减少组件加载时的数据负担，使页面更快地呈现给用户。

keep-alive

keep-alive会对组件进行缓存，这个时候，就不能使用mounted生命周期钩子对数据进行获取，有两种方式：

1. onActivated

   • keep-alive之后，组件不会重新创建，而onActivated会在组件被激活（从缓存中取出并重新展示）被触发。这是专门用于已经缓存的组件激活时触发，是keep-alive特有的生命周期钩子。

2. onBeforeRouteEnter

   • keep-alive和路由守卫的onBeforeRouteEnter结合使用，可以在路由切换时，决定是否重新渲染缓存的组件。