VUE设计与实现精要

1，同构渲染，渲染方式主要在前代WEB中主要有两种一种是CSR 一种是SSR，即客户端 渲染与服务端渲染，CSR客户端 渲染会有白屏，而SSR会对服务器压力较大，同构渲染能够取这两者中间的最优化状态，

1，动态节点收集与补丁标志 在VUE编译阶段可以对代码进行优化，编译过程中会在代码虚似DOM中建一个patchFlag 其值是一个对象当值中Text 为1时代码文件是动态的，有一个属性CLASS值为2

1，文本模式及其对解析器的影晌 文本模式主要分为四种，第一中是DATA就是HTM模式，能正常的识别HTML标签，第二种RCDATA 能识别HTML标签但会将其子元素识别为文本第三种，RAWTEXT 无

1，模彼DSL的编译器，一种将语言A翻译成另一种语言B其中语言A通常叫作源代码，在VUE源码编译中通过编译器将源码编译成AST代码，在这过程中通过一种状态机的管理将所有标签及文本编译成JSON对，其中

1，keepAlive 组件的实现原理，keepAlive 通过设置属性将当前组件标为非卸载组件，在VUE逻辑中如果产生卸载事件，将会在卸载辑中调用keepAlive方法将组件失活，而在挂载时也通过组

1，异步组件要解决的问题，第一可以指定加载出错时的泻染组件，二允许用户指定加载模态，三允许用户设置加载组件时长，四组件加载失败时提供重式能力 2，异步组件的实现原理,异步组件，主要是在setup中提供

4，props与组件的被动更新，在挂载组件的时候，通过一个方法将将 组件中挂载的属性分为props属性与Attr属性，当属性有在props中定义此时属性为props属性当属性没有在props中定义时属

1,渲染组件,每一个组件都由一个组件名称及一个渲染函数，一个data函数组成，渲染函数返回组件的虚似DOM， 2，组件状态与自更新 通过将data中的数据设置为晌应式数据，然后将晌应式数据放置在副作用

1，在快速DIFF算法中，会先对需要比较的代码做预处理，预处理分为四步，第一步，对前置元素与后置元素做KEY比较，如果KEY算等则进行元素更新，并设置新旧两组元素的索引位置，在前置比较中通过一个变量去

1，双端比较，所谓双端比较就是设置四个指针，分别是，新一组节点的开始位置的指针，新一组节点的结束位置的指针，旧一组节点的开始位置的指针，旧一组节点的结束位置的指针，通过四个IF判断，如果有一个条件满路

1，DIFF算法的性能开销，普通DIFF算法通过 将新旧两组节点的KEY做比较如果，有KEY值并相等进一步比较新旧两组节点的key 中的索引，初次比较找到KEY存下索引，如果没找到KEY值，说明是持载

9，更新子节点，当子节点更新时会做三种判断，一种是子点节为空，一种是子节点为文本，一种是子节点为数组，这就会涉及到新节点的三种类型，且新节点的三种类型每一种都会比较旧节点的三种类型，这其中VUE采用d

1，挂载子节点与元素的属性 在渲染时，新建一个专门挂载元素的方法，这 个方法里不需要补丁或者其他的当有子元素为元素时，创建并挂载到当前元素，当子元素为文本时，挂载为文本，最后使用插入方法将归并后的元素

1，渲染器与晌应式系统的结合，就真实DOM是没有办法实现晌应的但是我们有办法能过折中的办法来实现DOM的晌应，例如，立一个虚似DOM树及虚似DOM渲染器，在渲染器内部执行副作用函数收集，然后在其值改变

1，引入ref的概念 ref是通过 对象包装属性，并返回一个带value 的对象，其中这个对象是浅晌应的 2，toRef 解决晌应丢失用来完成对reactive对象的解构 toRefs 完成多属性解构

1，对象中this 的解决方案 Reflect.get(); 通过将get方法中的第三个参数传入第三个参数当做this 2，通过ownKeys 拦载for in 操作完成依赖收集 3，通过delete

4，晌应式系统中的调整执行         (1)，调度执行，在VUE的晌应式系统中我们可以设置effect 的回调，这个回调能够拦载VUE自身的回调是否执行，也就是说我们可以通过这个回调改造VUE的

晌应式系统的作用与实现主要介绍了 以下几个方法，由于内容比较多所有我分成几个部分来发布 1.晌应式数据与副作用函数，         首先我们要了解什么是晌应式数据，         其中晌应式数据为

第一,在设置VUE3时，考虑前端页面都涉及哪些内容，具体如下，DOM元素，属性，事件，元素层级，怎么在框架中实现以上功能的操作呢，答案如下，使用与HTML标签一致的方式描述DOM 使用与HTML一致的