第一篇：框架设计概览

第1章：权衡的艺术

命令式：通过原生JS的DOM操作api的方式来编写渲染页面的方式，侧重于过程中的细节；

声明式：不关注过程中的细节，只关注结果，以标签形式来编写代码然后再编译渲染页面；

性能对比：

       首次渲染页面时，命令式、声明式和innerHTML模板式相差不太多；

       更新页面时，命令式>声明式>innerHTML模板式；

易维护性对比：

       声明式>innerHTML模板式>命令式；

虚拟DOM:树形结构对象，通过Render渲染函数将树形结构对象递归地渲染成DOM元素；就是为了在更新页面时最小化性能找出差异而出现的（diff算法）。

        由于没有操作真实的DOM树，只是原生JS层的操作，所以性能相对于真实的DOM操作要高好多个量级；

        但是比原生js命令式DOM操作多了一个找出差异的步奏，所以不可能比原生js命令式DOM操作的性能更高。

纯运行时：通过Render渲染函数将树形结构对象递归地运行为命令式代码、渲染成DOM元素的过程；

        缺点：没有编译过程，没法分析用户提供的内容。

编译时+运行时（运行时编译）：先用Compiler编译函数将类HTML标签字符串编译成树形结构对象，然后通过Render渲染函数将树形结构对象递归地渲染成DOM元素的过程；

        注意点：运行时才编译，这回产生一定的性能开销。因此我们在构建的时候就执行Compiler程序将用户提供的内容编译好，，等到运行时就不用编译了，这对性能非常友好。

        优点：在编译时可以分析用户提供的内容，看看那些内容未来可能会变化，哪些内容永远不会变化，这样我们就可以在编译的时候提取这些信息，然后将其传递给Render函数，Render函数得到这些信息后，就可以进一步优化了。

纯编译时：用Compiler编译函数将类HTML标签字符串直接编译成命令式代码，渲染成DOM元素的过程。

        优点：由于不需要运行时， 性能会更好。

         缺点：灵活性差，即用户提供的内容必须编译后才能用。

第2章：框架设计的核心要素

 提升用户的开发体验：

        完善的信息提示机制；

控制框架代码体积：

       通过环境常量(通过构建工具的插件来设置)来控制打包时，是否将提示信息的代码¹打包在内，在生产环境代码包尽可能少的代码量，减少依赖包的体积；同时生产环境还能拥有较完善的提示信息机制。

框架要做到良好的Tree-Shaking:此机制需要ESM支持。

        对于调用不到的功能模块代码¹，在打包的时候自动跳过，不加入生产环境代码包里，减少代码包的体积。

        对于被调用到、但不会产生实际功能、也不会产生副作用的代码¹，Tree-Shaking是无法识别的；

        /*#_PURE_*/ 注释符号：非副作用代码注释符号，可以执行Tree-Shaking，不将其打包进代码包；

框架应该输出怎样的构建产物：打包时，框架本身的代码输出类型，不是项目业务代码打包后的代码包。

        以环境类型分类：

                有用于开发环境的框架代码包：vue.global.js；

                有用于生产环境的框架代码包:vue.global.prod.js；

        以使用场景分类：{output:{format:"iife"}},通过此配置指定模块形式。

                 iife：可以通过<script>标签直接引入框架使用，vue.global.js也是这个形式。

                 esm:可以通过<script type="module">标签直接引入vue.esm-browser.js格式框架使用；vue.runtime.esm-bundler.js是专门给rollup.js或者webpack等打包工具使用的。

                 cjs：服务端渲染时使用的格式。

特性开关：

        控制部分特定代码在特定环境中是否执行的控制开关。

        用户使用webpack.DefinePlugin插件设置预定义常量的值来实现。

错误处理：

       有一个完善错误处理机制；

良好的TypeScript类型支持：

        TypeScript给变量添加更严谨的类型限制，是项目代码跟便于维护，使框架更加适应大型项目；

第3章：Vue.js的设计思路

声明式地描述UI:

       用模板来声明式地描述UI，其实也就是用HTML元素标签描述UI，优点是可读性强，缺点是灵活性差；

       用树结构层级JavaScript对象来声明式地描述UI,其实也就是虚拟DOM对象，优点是灵活性强，可读性较差；

       Vue.js3同时支持这两种声明式地描述UI的方式。

初识渲染器：

        渲染器就是将虚拟DOM对象通过递归调用渲染函数成原生DOM操作api，最终渲染出来。这是创建节点的大体思路，但是渲染器的精髓是更新节点阶段。

组件的本质：是一组DOM元素的封装，是一个具有树结构的虚拟DOM对象，将这个对象挂载到父级节点中。

       可以通过函数的方式返回组件的虚拟DOM对象，也可以通过对象的方式返回组件的虚拟DOM对象。

模板的工作原理：

        模板（标签）通过编译器将模板编译成虚拟DOM，然后再通过渲染器将虚拟DOM渲染成真实DOM。

Vue.js是各个模块组成的有机整体：各个模块之间是相互联系的。

        编译器会分析识别变量，并做上标记，传递给虚拟DOM，渲染器会根据这些标记做进一步的优化。