第二式拳打vue3生命周期

经过上一式的学习，我相信大家已经会创建一个vite项目了，并且知道如何运行，如何打包，如何查看打包的内容，那么本章节会教给大家第二式。

一点点的小提醒

插件风云

有些童鞋们可能之前插件用的是Vetur（这个适合vue）,那么运行vue3+ts的项目的时候可能会存在一点小报错，这里建议大家禁用Vetur，使用Volar。

关于引入模块报错

main.js发现引入了app.vue会报错的。这里我建议你在根目录新建一个env.d.ts文件，关于报错的原因，网上统一的解释就是ts无法识别出了ts文件的vue文件。
解决方案：

// <reference types="vite/client" />
// vue3 报错提示 找不到模块“./XXX.vue”或其相应的类型声明
// 报错原因：typescript 只能理解 .ts 文件，无法理解 .vue文件
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

vue3生命周期

什么是生命周期

在 Vue 中的每个组件都会经历从创建到挂载到更新再到销毁这几个阶段，而在这些阶段中，Vue 会运行一种叫做生命周期钩子的函数，方便我们在特定的阶段有机会添加上我们自己的代码。

生命周期有哪些阶段

Vue 生命周期总共可以分为 8 各阶段：创建前后、挂载前后、更新前后、销毁前后，以及一些特殊场景的生命周期（keep-alive 激活时(activated)未激活时(deactivated)、捕获后代组件错误时(errorCaptured)）。Vue3 中还新增了三个,用于调试和服务端渲染场景。

仅在开发模式下使用

onRenderTracked()

onRenderTriggered()

服务端渲染

onServerPrefetch()只在服务端渲染中执行

Vue生命周期的流程

vue2的生命周期，我相信大家已经都记得非常清楚了，在 Vue3 中的变化绝大多数只要加上前缀 on 即可，比如 mounted 变为 onMounted，除了 beforeDestroy 和 destroyed 被重新命名为 beforeUnmount 和 unMounted
全部的生命周期，我这里也就不多写了，唯一还要提醒的是，setup 是比 created 先执行的； 而且没有 beforeCreate 和 created。那么这个setup实际上就是data和methods。而这些生命周期分别用来干些什么，和vue2并无明显的差别。

生命周期演示过程

<template>
  <div>这是第一个组件</div>
</template>
<script lang="ts">
import { defineComponent,onBeforeMount,onMounted } from 'vue';
export default defineComponent({
  setup(){
   console.log('什么时候执行')
   onBeforeMount(()=>{
    console.log('执行了onBeforeMount')
   })
   onMounted(()=>{
    console.log('执行了onMounted')
   })
  }

})
</script>
<style>
</style>

解析：其实大家不难看出来，上面代码的写法和平时写vue2是的写法有哪里不一样。第一点就是script标签里面加上了ts，那这里有一些熟悉vue3+ts的可能会说，上面的写法为什么不加上setup（ps:这里我暂时不用语法糖去写，方便大家最早的知道初始的写法）。第二点，我们想使用一些函数，这里是生命周期，都需要引入一下。第三点，就是非常显眼的setup函数了。

上述代码运行的结果就是：setup>onBeforeMount>onMounted

两百斤反骨

你以为真的不会写完整生命周期吗，那你就错了，都写到这了，不给个小赞赞么。

1、setup(): 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数,可以检查dom是否被正确渲染，也可以定义一些dom操作，比如给某个元素设置属性，添加一些事件等

3、onMounted(): 组件挂载完成后执行的函数,组件挂载时调用可以访问数据、dom 元素、子组件等

4、onBeforeUpdate(): 组件更新之前执行的函数,更新前调用此时 view 层还未更新，可用于获取更新前的各种状态

5、onUpdated(): 组件更新完成之后执行的函数,完成更新时调用此时view层已经完成更新，所有状态已经是最新的了

6、onBeforeUnmount(): 组件卸载之前执行的函数,实例被销毁前调用，可用于一些定时器或订阅的取消

7、onUnmounted(): 组件卸载完成后执行的函数,销毁一个实例时调用可以清理与其他实例的链接，解绑它的全部指令以及事件监听器

8、onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

9、onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

10、onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数;

11、onRenderTracked()：渲染的时候可以追踪到;

12、onRenderTriggered():重新渲染的时候触发;

13、onServerPrefetch():此钩子仅在服务器端渲染期间调用，可用于执行仅服务器数据获取。

第二式 拳打vue3生命周期