Vue.js设计与实现知识点记录

Vue.js既支持服务端渲染（Server side rendering） SSR，也支持客户端渲染（Client side rendering）CSR 接下来学习：CSR和SSR的区别，Vue.js

编译优化：指的是编译器将模板编译为渲染函数的过程中尽可能多提取关键信息，并以此指导生成最优代码的过程。 1、动态节点收集与补丁标志 1、传统Diff算法的问题 Diff算法需要按照虚拟DOM的层级结构

1、文本模式及其对解析器的影响 文本模式：指的是解析器在工作时进入的一些特殊状态 解析器在遇到不同的标签时，会切换模式，影响对文本的解析行为，具体有如下标签 解析器的初始模式是DATA模式。Vue.j

1、模板DSL的编译器 编译器本质也只是一段程序，把源代码编译为目标代码。 编译的过程包括：词法分析、语法分析、语义分析、中间代码生成、优化、目标代码生成。如下图所示 以上的编译过程是所有源代码的基本

内建组件和模块主要包括KeepAlive组件、Teleport组件、Transition组件等 1、KeepAlive组件的实现原理 1.组件的激活与失活 KeepAlive组件可以避免频繁的创建、挂

异步组件：指的是异步渲染组件 1、异步组件要解决的问题 1.组件加载失败，是否渲染Error 2.组件加载时，是否显示占位内容 3.是否延迟展示loading 4.加载失败是否重试 2、异步组件的实现

渲染器学习之后就应该学习组件化了，渲染器就是为了把组件渲染出来，把虚拟DOM渲染为真实DOM 1、渲染组件 从用户的角度来看，一个有状态的组件就是一个选项对象。但是，从渲染器内部来看，一个组件则是一个

学习了简单Diff算法，利用虚拟节点的key，尽可能复用DOM，减少性能开销，但简单Diff算法仍然有很多缺陷需要完善，通过双端Diff算法解决

当新旧vnode的子节点都是一组子节点，最小性能开销完成更新操作，需要比较两组子节点，用于比较的算法旧叫Diff算法。 1、减少DOM操作的性能开销 核心的Diff算法只关心新旧虚拟节点都存在一组子节

本章节学习渲染器的核心功能：挂载与更新 1、挂载子节点和元素的属性 一个元素除了具有文本子节点，还可以包含其他元素子节点，且子节点可以有多个。举个栗子，vnode的子节点写成个数组 上面代码表示虚拟节

上一章学习了非原始值的响应式方案，本章学习的是原始值响应式方案，原始值指的是Boolean、Number、BigInt、String、Symbol、undefined和null等类型的值，在JS中原始

上一章节学习了原始值响应式系统的设计，接下来学习渲染器的实现原理，Vue.js中很多功能都依靠渲染器，如Transition组件、Teleport组件、Suspence组件等。 1、渲染器与响应系统

学习了简单的响应式系统的设计，可以简单的拦截set操作和get操作，但是Vue.js中的响应式系统要远不止如此，比如支持for in，其他的数据结构，Map Set等支持，仍然需要深入学习。 1、理解

1、响应式数据的基本实现 响应式要符合两个基本特征，在方法执行时里面的字段时需要触发读操作，修改字段时要触发写操作。用两幅图来表达一下（es2015之前只能使用Object.definePropert

1、声明式描述UI Vue所采用的组件描述是声明是的方式（也就是如这种标签），这种方式并没有比JavaScript命令式组件更灵活，但更方便阅读和编写。 2、渲染器 Vue.js需要依赖渲染器把虚拟D

1、Vue的框架的类型： 是运行时和编译时的结合体，在前端中既需要可实时预览的效果，也不能让浏览器的负担过大，所以需要虚拟DOM与真实DOM相互结合，不应该完全无法预览，也不应该为了预览把所有的事情都