VUE设计与实现

1. 动态节点收集和补丁标记 2. block 树 3. 静态提升 4. 预字符串化 5. 缓存内联事件处理函数 6. v-once ### 1. 动态节点收集和补丁标记 Vue3编译优化指的是通过

### 什么是编译器 1. 编译器其实只是一段程序，它用 用来将“一种语言 A”翻译成“另外-元 种语言 B”。 2. 其中，语言A通常叫作源代码(source code) 语言B通常叫作目标代码(o

> Vue.js 内建的三个组件，即 KeepAlive 组件、Teleport 组件和 Transition组件。它们的共同特点是，与渲染器的结合非常紧密，因此需要框架提供底层的实现与支持。 #

### 组件的实现原理 从用户的层面看来，一个组件就是一个选项对象或者是一个函数, 在patch的时候, ```js function patch(n1, n2, container, anch

### 第八章 挂载与更新 #### 一、挂载子节点和元素的属性 1. 第一次 Vnode 渲染为 HTML，并且遍历递归渲染 Vnode 的子节点. 2. 遍历 Vnode.props,添加为标

### 原始值的响应式实现 - Proxy 无法提供对原始值的代理需要使用一层对象作为包裹，间接实现原始值的响应式方案。由于“包裹对象”本质上与普通对象没有任何区别，因此为了区分 ref 与普通响应

### 渲染器相关的属于和概念 1. 渲染器(renderer)和渲染(render) + 渲染器: 作用是把虚拟 DOM 渲染为特定平台上的真实元素。浏览器平台上，渲染器会把虚拟 DOM 渲

### 常规对象和异质对象 - 访问[ECMAStript 官网](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-in

常规对象和异质对象 访问ECMAStript 官网 根据 ECMAScript 规范，对象可分为两种对象，常规对象(ordinary object)和异质对象(exotic object)， 任何不属

最基础的一个响应式系统 利用 proxy 的夹子(get, set) 来劫持数据的读取, 读取数据时来收集副作用函数， 设置数据时出发副作用函数 一个完善的响应式系统 响应式系统的数据结构 WeakR

快速 Diff 算法在实测中性能最优。它借鉴了文本 Diff 中的预处理思路，先处理新旧两组子节点中相同的前置节点和相同的后置节点。 当前置节点和后置节点全部处理完毕后，如果无法简单地通过挂载新节点或

双端diff 算法 简单diff算法从一端开始处理； 简单diff算法能够实现 dom 节点的复用，但有的时候会做一些没必要的移动。 双端diff算法是一种同时对新旧vnode的两个端点进行比较的算法

简单diff算法 diff算法的目的就是以最小的性能开销，进行精准的更新 一、在没有考虑新旧子节点之间是的顺序是乱的情况下， 预设他们子节点顺序是一致的： 新子节点数量和旧子节点数量一样，只是节点内容

声明式的 UI 描述 声明式的好处在于，它直接描述结果，用户不需要关注过程。 Vue.js 采用模板的方式来描述 UI，但它同样支持使用虚拟 DOM 来描述 UI 。虚拟 DOM 要比模板更加灵活，但

1. 上手体验：足够的提示和引导 2. 代码体积与 tree-shaking 3. 构建输出产物和开关 4. 错误处理：健壮、心智负担 5. ts 类型支持：维护性

命令式和声明式 、性能与可维护性的权衡、 关于虚拟 DOM 的性能、 性能对比、**声明式框架**更加关注结果, 命令式实现上面的自然语言描述的功能