Vue

编译 web 模式的编译主要做了 3 件事： 解析 template 生成 AST AST 转换 生成代码 解析 template 生成 AST 解析子节点 解析注释节点 解析插值 解析普通文本 解析

内置组件 <Teleport> 定义 创建、更新 移除 <KeepAlive> 定义 创建 卸载 <Transition> 定义 渲染 钩子函数的执行

> 本质是 **prop** 和 **事件监听** 的语法糖。 > > 通过 prop 实现 `数据 -> 视图` 的单向数据流；通过监听 change 或 input 事件实现 `视图 -> 数据`

directive 定义：本质就是一个 JavaScript 对象，对象上挂着一些钩子函数。 实现：在元素的生命周期中注入代码。 指令注册 注册原理：把指令的定义保存到相应的地方，未来使用的时候可以从

插槽的实现实际上就是一种 **延时渲染**，把父组件中编写的插槽内容保存到一个对象上，并且把具体渲染 DOM 的代码用函数的方式封装，然后在子组件渲染的时候，根据插槽名在对象中找到对应的函数，然后执行

props props 的作用：允许组件的使用者在外部传递，实现各种各样的功能。 初始化 props 初始化 Props 主要做了 3 件事： 设置 props 的值 验证 props 合法 把 pr

# 依赖注入 依赖注入用于祖先组件向后代组件传递数据。 > 特点： > > 祖先组件不需要知道哪些后代组件在使用它提供的数据。 > > 后代组件也不需要知道注入的数据来自哪里。

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机

侦听器 watch 侦听器是当侦听的对象或者函数发生了变化则自动执行某个回调函数。 侦听器的内部设计：侦听响应式数据的变化，内部创建 effect runner，首次执行 runner 做依赖收集，然

计算属性 计算属性允许用户定义一个计算方法，然后根据一些依赖的响应式数据计算出新值并返回。 当依赖发生变化时，计算属性可以自动重新计算获取新值，使用方便。 计算属性的运行机制： 计算属性的两个特点：

响应式 响应式的本质是当数据变化后会自动执行某个函数。 映射到组件的实现就是，当数据变化后，会自动触发组件的重新渲染。 响应式的两个核心流程： 依赖收集 派发通知 Vue2 Vue3 reactive

组件更新 组件更新流程： 从头部开始同步 从尾部开始同步 挂载剩余的新节点 删除多余的旧节点 处理未知的子序列 当两个节点类型相同时，执行更新操作 当新子节点中没有旧子节点中的某些节点时，执行删除操作

组件渲染 组件的渲染流程： 创建 vnode createVNode 主要做了四件事： 处理 props，标准化 class 和 style 对 vnode 类型信息编码 创建 vnode 对象 标准

初始化应用实例 创建 Vue 实例对象 createApp 中做了两件事： 创建 app 对象 保存并重写 mount 使用 ensureRenderer().createApp() 来创建 app

Vue3 对比 Vue2 的优化 源码优化 使用 monorepo 管理代码 使用 TypeScript 开发代码 性能优化 减少体积 数据劫持优化 编译优化 <slot> 优化 语法优化 优化逻辑组