Vue3——基础内容部分(小满版本)（三）https://developer.aliyun.com/article/1470375

第十二章 — 生命周期 & 源码讲解

setup语法糖模式下是没有beforeCreate created这两个生命周期的

被setup代替

onBeforeMount()
//在组件 DOM 实际渲染安装之前调用。在这一步中，根元素还不存在。
onMounted()
//在组件的第一次渲染后调用，该元素现在可用，允许直接 DOM 访问
onBeforeUpdate()
//数据更新时调用，发生在虚拟 DOM 打补丁之前。
onUpdated()
//DOM 更新后，updated 的方法即会调用。
onBeforeUnmount()
//在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
onUnmounted()
//卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

使用v-if触发伏笔：当组件绑定一个v-if的时候是会触发组件的创建跟销毁两个生命钩子的

beforeMount#

在组件被挂载之前调用。

就是创建之前

• 类型

interface ComponentOptions {
  beforeMount?(this: ComponentPublicInstance): void
}

• 详细信息
  当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
  这个钩子在服务端渲染时不会被调用。

mounted#

在组件被挂载之后调用。

创建完成

• 类型

interface ComponentOptions {
  mounted?(this: ComponentPublicInstance): void
}

• 详细信息
  组件在以下情况下被视为已挂载：

• 所有同步子组件都已经被挂载。(不包含异步组件或 树内的组件)
• 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
这个钩子在服务端渲染时不会被调用。

beforeUpdate#

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

获取的是更新之前的DOM

例子：比如原本的文本是"小满穿黑丝"，更新完成后是"小满cos女装"。在这里所谓获取更新之前的DOM，获取的就是"小满穿黑丝"

• 类型

interface ComponentOptions {
  beforeUpdate?(this: ComponentPublicInstance): void
}

• 详细信息
  这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
  这个钩子在服务端渲染时不会被调用。

updated#

在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

获取的是更新之后的DOM

• 类型

interface ComponentOptions {
  updated?(this: ComponentPublicInstance): void
}

• 详细信息
  父组件的更新钩子将在其子组件的更新钩子之后调用。
  这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
  这个钩子在服务端渲染时不会被调用。
  WARNING
  不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！

beforeUnmount#

在一个组件实例被卸载之前调用。

• 类型

interface ComponentOptions {
  beforeUnmount?(this: ComponentPublicInstance): void
}

• 详细信息
  当这个钩子被调用时，组件实例依然还保有全部的功能。
  这个钩子在服务端渲染时不会被调用。

unmounted#

在一个组件实例被卸载之后调用。

• 类型

interface ComponentOptions {
  unmounted?(this: ComponentPublicInstance): void
}

• 详细信息
  一个组件在以下情况下被视为已卸载：

• 其所有子组件都已经被卸载。
• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。
这个钩子在服务端渲染时不会被调用。

errorCaptured#

在捕获了后代组件传递的错误时调用。

• 类型

interface ComponentOptions {
  errorCaptured?(
    this: ComponentPublicInstance,
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string
  ): boolean | void
}

• 详细信息
  错误可以从以下几个来源中捕获：

• 组件渲染
• 事件处理器
• 生命周期钩子
• setup() 函数
• 侦听器
• 自定义指令钩子
• 过渡钩子

这个钩子带有三个实参：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。
你可以在 errorCaptured() 中更改组件状态来为用户显示一个错误状态。然而重要的是，不要让错误状态渲染为导致本次错误的内容，否则组件就会进入无限的渲染循环中。
这个钩子可以通过返回 false 来阻止错误继续向上传递。请看下方的传递细节介绍。
错误传递规则

• 默认情况下，所有的错误都会被发送到应用级的 app.config.errorHandler (前提是这个函数已经定义)，这样这些错误都能在一个统一的地方报告给分析服务。
• 如果组件的继承链或组件链上存在多个 errorCaptured 钩子，对于同一个错误，这些钩子会被按从底至上的顺序一一调用。这个过程被称为 “向上传递”，类似于原生 DOM 事件的冒泡机制。
• 如果 errorCaptured 钩子本身抛出了一个错误，那么这个错误和原来捕获到的错误都将被发送到 app.config.errorHandler。
• errorCaptured 钩子可以通过返回 false 来阻止错误继续向上传递。即表示 “这个错误已经被处理了，应当被忽略”，它将阻止其他的 errorCaptured 钩子或 app.config.errorHandler 因这个错误而被调用。

renderTracked #

在一个响应式依赖被组件的渲染作用追踪后调用。(英译中：渲染追踪)

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

收集依赖创建的钩子，调试用的

• 类型

interface ComponentOptions {
  renderTracked?(this: ComponentPublicInstance, e: DebuggerEvent): void
}
type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
}

• 参考：深入响应式系统

renderTriggered #

在一个响应式依赖被组件触发了重新渲染之后调用。英译中：渲染触发

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

触发依赖更新，调试用的

• 类型

interface ComponentOptions {
  renderTriggered?(this: ComponentPublicInstance, e: DebuggerEvent): void
}
type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
}

• 参考：深入响应式系统

activated#

若组件实例是 `` 缓存树的一部分，当组件被插入到 DOM 中时调用。

这个钩子在服务端渲染时不会被调用。

• 类型

interface ComponentOptions {
  activated?(this: ComponentPublicInstance): void
}

• 参考：指南 - 被缓存实例的生命周期

deactivated#

若组件实例是 `` 缓存树的一部分，当组件从 DOM 中被移除时调用。

这个钩子在服务端渲染时不会被调用。

• 类型

interface ComponentOptions {
  deactivated?(this: ComponentPublicInstance): void
}

• 参考：指南 - 被缓存实例的生命周期

serverPrefetch #

当组件实例在服务器上被渲染之前要完成的异步函数。

• 类型

interface ComponentOptions {
  serverPrefetch?(this: ComponentPublicInstance): Promise<any>
}

• 详细信息
  如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。
  这个钩子仅会在服务端渲染中执行，可以用于执行一些仅在服务端才有的数据抓取过程。
• 示例

export default {
  data() {
    return {
      data: null
    }
  },
  async serverPrefetch() {
    // 组件会作为初次请求的一部分被渲染
    // 会在服务端预抓取数据，因为这比客户端更快
    this.data = await fetchOnServer(/* ... */)
  },
  async mounted() {
    if (!this.data) {
      // 如果数据在挂载时是 null，这意味着这个组件
      // 是在客户端动态渲染的，请另外执行一个
      // 客户端请求作为替代
      this.data = await fetchOnClient(/* ... */)
    }
  }
}

源码解析

位置：runtime-core下的apiLifecycle.ts中

• 钩子函数(简称)挂载到组件自身的实例上
• 通过getCurrertInstance可以获取当前组件的实例
• 通过获取组件实例，在控制台就能直接看到生命周期已经挂载上来了，虽然是简称
• 然后做了一个createHook，函数柯里化进行封装
• 
  

柯里化：在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数 (最初函数的第一个参数) 的函数，并且返回接受余下的参数且返回结果的新函数的技术。

• 然后调用injectHook这个函数去做一个缓存 =>
  如果第一次没有值的化设为空数组，有值的话将直接读取
• 在下面使用了push将warppedHook做一个添加
• 对warppeHook进行了一个判断，判断当前组件target.isUnmounted是否卸载掉，是的话直接return返回。不是的话根据源码注释可以得知为停止收集依赖，避免重复收集依赖
• 然后设置当前darget为组件实例，接着执行钩子函数，清空当前组件实例，恢复收集依赖

在renderer.ts文件夹中对每个阶段都进行一个调用

• 在componentUpdateFn中做一个调用
• 做一个判断，当前组件如果没有挂载的话走没挂载组件的判断，否则就是更新
• 挂载阶段

• 先执行一下invokeArrayFns钩子，然后做一些渲染，进行一个挂载到容器中，此时就有了el也就是DOM了
• 然后就开始判断有没有m，也就是枚举，有的话就执行queuePostRenderEffect，执行mounted的一个生命周期

• 更新
• 卸载

• 卸载完后执行onunmounted证明卸载完成

第十三章 — 组件认识less & scoped

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

需要安装一下(友情提示装到根目录下面，例如Vite-App)

命令：npm install less less-loder -D(大D就是安装到开发依赖)

index的命名能够直接识别

layout分区：

• index.vue(然后把布局返回App.vue)

• Menu =>index.vue =>表单
• Header =>index.vue=> 头部
• Content =>index.vue=> 主体内容

在main.ts进行引入，import './assets/css/reset.less'

在css里

1. &-xxx：{}是副级，能写在其他大属性的里面
2.