Vue.js 3 源码解读

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

设置 DOM 的属性有两种方法 setAttribute 直接设置元素的 DOM Properties 但是，无论是使用 setAttribute 函数，还是直接将属性设置在 DOM 对象上，都存在缺

React Diff 算法 认识 React Diff 算法 React 是 Fiber 架构的，Fiber 其实是一个链表的结构，但是由于没有设置反向指针，因此没有使用双端比对的方式去优化 Diff

getNow 函数的源码如下： /*#__PURE__*/ 注释的作用是与 rollup.js 配合使用，用于告诉 rollup.js ，该函数不会产生副作用，可以放心地对其进行 Tree-Shaki

简单来说，当新旧 vnode 的子节点都是一组节点时，为了以最小的性能开销完成更新操作，需要比较两组子节点，用于比较的算法就叫作 Diff 算法。我们知道，操作 DOM 的性能开销通常比较大，而渲染器