Vue.js 3 源码解读

Vue 组件的插槽机制受原生 Web Component <slot> 元素的启发而诞生。Vue 组件通过插槽的方式实现内容的分法，它允许我们在父组件中编写 DOM 并在子组件渲染时把 DOM 添加到

关于位运算的认识 二进制的位运算是非常底层的运算，直接操作二进制位，比起使用对象或数组，省略了中间的转换操作，运算速度快，而且也节省了运行内存，因为各个状态只需要数字（number）就能存储，比起使用

persisted，这个 prop 没有在 Vue 的官方文档中出现，不过我们可以通过源码知道： 当 persisted 设置为 true 时，表示该过渡不会实际插入或移除 DOM 元素。相反，他只会

v-if 和 v-for 都是 Vue 提供的指令。 v-if 用于模板的条件渲染，当 v-if 传入的值为 true 时，则渲染该内容 v-for 用于模板的列表渲染，会循环地渲染模板内容 上面的代

v-if 上面这段模板会被 Vue 编译器编译为下面的渲染函数 在 Vue3 中，要获得组件模板的渲染函数会比 Vue2 简单，只需在 Vue3 源码的根目录下运行 pnpm run dev-comp

v-if 上面这段模板会被 Vue 编译器编译为下面的渲染函数 由于 Vue2 的官方文档中没有提供在线的演练场，Vue2 要得到模板编译后的渲染函数会稍微麻烦一些，需要手动调用 Vue2 提供的 @

Teleport 组件解决的问题 Teleport 组件是 Vue3 新增的内置组件，用于实现将组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去，类似于 React 的 Portals

函数式组件是无状态的组件，就像纯函数一样。他接收 props ，返回虚拟 dom 。 函数式组件无须初始化 data 以及生命周期钩子，也没有 this ，函数式组件的初始化性能消耗小于有状态组件。

在日常的开发中，可借助判断 __esModule 是否为 true 或 Symbol.toStringTag 是否为 Module 判断当前模块是否为 ES 模块。

KeepAlive 组件是 Vue 的内置组件之一，他的功能是在多个组件间动态切换时缓存被移除的组件实例。缓存了的组件，其内部的状态不会被重置。这在动态切换组件，需要保持组件状态的场景下非常有用。

--- highlight: a11y-dark --- 在大型的前端项目中，为了提升应用页面的加载

Vue3 中有两种注册生命周期的方法，一种是选项式的 API 风格，另一种的组合式的 API 风格。Vue3 的生命周期是完全兼容了 Vue2 的生命周期的。生命周期选项和组合式 API 中的生命周期

setup 函数的作用 setup 函数（钩子）是 Vue 组件组合式 API 的入口，用户可以在 setup 函数内建立组合逻辑、创建响应式数据、创建通用函数、注册生命周期钩子等。在组件的整个生命周

什么是组件的被动更新？ 由 props 引起的组件更新为组件的被动更新。组件自己内部状态引起的更新为自更新，props 本质是父组件的数据，因此父组件会先进行自更新。 从源码层面，认识组件的 prop

Vue 组件的实例本质上是一个状态集合（或一个对象），它维护着组件运行过程中的所有信息，例如注册到组件的生命周期函数、组件渲染的子树（subTree）、组件是否已经被挂载、组件自身的状态（data），

错误处理 错误处理是框架设计的核心要素之一。框架的错误处理好坏，直接决定用户应用程序的健壮性以及用户开发应用时处理错误的心智负担。同时，Vue 作为一个基础地前端框架，也提供了统一地全局错误处理接口，

Vue3 的调度系统 Vue3 中需要处理许多任务，比如：用户操作、watch 回调、组件自更新（渲染）等。Vue3 为了合理的管理这些任务，提高框架性能，特意设计了任务调度系统。所以，Vue3 中调

为何要组件化？ 渲染器主要负责将虚拟 DOM 渲染为真实 DOM，我们只需要使用虚拟 DOM 来描述最终呈现的内容即可。但当我们编写比较复杂的页面时，用来描述页面结构的虚拟 DOM 的代码量会变得越来

Vue.js 中，组件自身的状态在 data 函数中定义，同时可以在渲染函数中通过 this 访问由 data 函数返回的状态数据。 实现组件自身状态的初始化需要两个步骤： 通过组件的选项对象取得 d

Vue3 的快速 Diff 算法中使用了最长递增子序列来提升 Diff 的效率，因为最长递增子序列可以最大程度减少 DOM 移动的次数，这也是 Vue3 的快速 Diff 算法比 Vue2 的双端 D