视频地址：EvanYou的《Vue3.0设计原理》或《Vue3.0设计原理》介绍视频，主要介绍Vue3.0的设计初衷。Vue希望尽可能满足不同用户群体的不同需求。它希望为用户提供一个低门槛、易用、灵活、高度可扩展、强大、令人印象深刻的框架。它还希望框架本身易于维护。在设计Vue3.0时，框架开发人员总是面临着在这些需求之间进行取舍和权衡。Approachabilityvs.Scalability兼顾了低门槛和可扩展性，以满足非专业前端工程师搭建网站和创建高复杂度项目的需求。CDNbuild&VueCLICDN支持快速启动项目VueCLI提供便捷全面的项目管理OptionsAPI&CompositionAPI开放部分内部API，提供更灵活的代码组织和逻辑复用能力，提供TypeScript支持。（见后文）TypeScriptvs.JavaScriptUsingTypeScript：优点：提供基于IDE的代码补全和类型信息功能。在调整代码时，基于IDE的代码校验可以更全面的完成调整。缺点：需要短期学习TypeScript相关知识，从长远来看，利大于弊。在Vue3.0中，用户不需要使用TypeScript。TypeScript用户和JavaScript用户都可以从IDE插件提供的功能中受益。Templatevs.JSXVue3.0希望成为任何想使用Vue的人的包容性框架。开发人员可以选择他们喜欢的代码组织方式。但Template将有利于VirtualDOM的性能优化。每次更新视图时，都必须遍历整个VirtualDOM树以找到更改的节点。这实际上是某种意义上的暴力脏检查。模板是在语法上受约束的模板字符串，比JSX或渲染函数更有利于某些分析。在Vue3.0中，将构建BlockTree来优化以上问题：基于结构化指令（如v-forv-if），将Template依次划分为blocks，在每个block中，节点的相关结构是完整的static每个块只需要一个单层数组来跟踪动态节点。例如，结构如下。对于外块，它只有一个动态节点，即v-if节点。对于内部块，只有消息跨度可能会动态变化。原来每一层都有多个节点，而且不止两层。优化后，Diff时的递归层次和迭代深度大大降低。更新性能将取决于动态内容的数量，而不是整体模板大小。垃圾回收是Vue重要的性能杀手之一，而这种优化也大大降低了垃圾回收的压力。在前面的处理中，每次render时，都会为所有节点重新创建VirtualDOM节点，包括静态节点，这样其实是非常浪费的。优化后，每次渲染只需要复用之前的对象，无需重新创建。Vue3.0中的Powervs.Size：调整大部分的GlobalAPIs和internalhelpers以ES模块的形式导出，供外部导入，供tree-shaking编译器使用，将模板编译成代码可以进行tree-shaking（比如使用v-model="string"，会自动引入vModelText。在线体验DEMO）FrameworkCoherencevs.Low-levelFlexibility以React和Angular为例，Angular尝试做更多，而React尝试做的更少。（并不是说哪个设计不好，只是框架设计的选择不同）这里smallscope是指React等框架，bigscope是指Angular等框架。SmallScope的优势：入门门槛低，入手概念少，灵活性更高，同一个问题的解决方案更多，这也创造了一个活跃的生态系统，同时也增加了用户选择解决方案难度较小的维度SmallScope允许团队要专注于探索新想法范围小缺点：当用户需要解决复杂问题时，基于这些简单的概念，需要更多的探索工作随着时间的推移，最佳实践自然而然地出现，成为半必要的技能，但这些最佳实践通常没有正式记录。因此，这也是一种取舍。生态发展过快会导致生态碎片化，增加用户开发成本，增加用户流失率。LargeScope优点：大多数常见问题可以通过内置抽象解决集中式设计过程保证生态系统的一致性LargeScope缺点：较高的早期学习障碍如果内置解决方案不适用于某个场景，在解决问题时维护面可能会变得僵化和变大，导致在引入主要新特性时成本更高，而Vue在两者之间做出了权衡。这在此处称为“渐进式”范围。分层设计，允许用户以渐进的方式有选择地引入功能低进入门槛官方记录了Vue3.0中常见问题的解决方案：保持与Vue2路由器相同的连贯体验，Vuex和test-utils将单独更新以符合这一愿景.得益于tree-shaking和CompositionAPI，可以简化一些解决方案，并可以重用更多逻辑。Vuex状态的devtools跟踪也将更加健壮。开放更多底层能力，例如支持自定义渲染器、编译器API等。这些实际上在Vue2中得到了支持，但它们并没有被正式记录为一流的API，也没有给出正确的使用方法。有了这些能力，就可以在iOS、Android等原生设备上渲染原生视图，甚至可以实现命令行渲染。它可以在nodejs中运行，不需要在浏览器中运行。在compilerpipeline中开放更多底层能力，比如parsetransformgenerateAPIs等。被prettier、ESLintplugins等外部工具使用，这样他们就不用做模板解析等重复性的工作了。
