《Design Principles of Vue 3.0 by Evan You - Vue 3.0 设计原理》观看笔记

视频地址：Design Principles of Vue 3.0 by Evan You or Design Principles of Vue 3.0

简介

视频主要介绍 Vue 3.0 设计背后的意图。

Vue 但愿尽量知足不一样用户群体的不一样需求，但愿提供用户低门槛、易用、灵活、高可扩展、功能强大、体积感人的框架，也但愿框架自己易维护。设计 Vue 3.0 时，框架开发者时时刻刻面临着在这些需求间进行取舍，求得平衡。

Approachability vs. Scalability

兼顾低门槛与可扩展，以知足非专业前端工程师的建站需求及建立高复杂度项目的需求。

• CDN build & Vue CLI

  • CDN 支持迅速开始一个项目
  • Vue CLI 提供方便全面的项目管理
• Options API & Composition API
  开放一些内部 API ，提供更为灵活的代码组织方式与逻辑复用能力，提供 TypeScript 支持。（看后面）

TypeScript vs. JavaScript

使用 TypeScript：

优势：

• 提供基于 IDE 的代码补全与类型信息功能
• 代码调整时，基于 IDE 的代码校验，能够更为全面地完成调整

缺点：

• 须要学习 TypeScript 相关知识
• 短时间来看，开发效率会下降，须要考虑类型设计定义等，长期看，利大于弊

在 Vue 3.0 中，不强制要求用户使用 TypeScript，TypeScript 用户和 JavaScript 用户都能从 IDE 插件提供的功能中获益。

Template vs. JSX

Vue 3.0 但愿成为一个包容性的框架，适用于任何想用 Vue 的用户。

开发者能够选择本身喜欢的方式组织代码。但 Template 将有利于 Virtual DOM 的性能优化。

每次视图更新，必须遍历整个 Virtual DOM 树，找到变化的 node ，这其实也是某种意义上的暴力脏检查。

Template 是具备语法约束模板字符串，比起 JSX 或渲染函数，更有利于对其进行某些分析。

在 Vue 3.0 中，将构建 Block Tree 来优化上述问题：

• 基于结构化的指令（如 v-for v-if），将 Template 分为一个又一个的 blocks
• 在每一个 block 中，node 相对结构是彻底静态的
• 每一个 block 内只须要一个单层数组来追踪动态节点

  

举个栗子，有结构以下，对于外层 block ，它只有一个动态结点即 v-if 结点。对于内层 block ，只有 message span 可能动态变化。

原来各层都有多个结点，层级也不止两层。通过优化，极大的减小了 Diff 时递归层级与迭代深度。更新性能将取决于动态内容的数量，而不是整个 template 的体积。

垃圾回收是 Vue 重要的性能杀手之一，这个优化也极大地减轻了垃圾回收的压力。

在以前的处理中，每次 render ，都会为全部结点，包括静态结点，从新建立 Virtual DOM node ，这实际上是很浪费的。优化后，每次 render 只须要复用以前的对象，而无需从新建立。

Power vs. Size

在 Vue 3.0 中：

• 调整大部分的 Global APIs 和 内部 helpers 以 ES modules 形式导出供外部引入，使其可被 tree-shaking
• 编译器也会将 template 编译成可被 tree-shaking 的代码 （例如，使用到了 v-model="string" ，将自动引入 vModelText 。在线体验 DEMO）

Framework Coherence vs. Low-level Flexibility

以 React 和 Angular 举例， Angular 试图作的更多，而 React 试图作的更少。（并非说他们中谁的设计很差，这只是框架设计的不一样选择）

此处以 small scope 代指 React 这类框架 ，以 big scope 代指 Angular 这类框架。

Small Scope 优势：

• 门槛低，更少的概念须要入手
• 更灵活，同一个问题有更多的解决方案，这也造就了活跃的生态系统，但也增大了用户挑选方案时的难度
• 更小的维度面，使得团队能够专一探索新 ideas

Small Scope 缺点：

• 当用户须要解决复杂问题时，基于这些简单的概念，须要作更多的探索工做
• 随着时间推移，最佳实践天然而然地出现，并成为一种半必须的技能，但这些最佳实践，一般不会被官方文档化

因此，这也是一种权衡，生态发展太快，会致使生态碎片化，增长用户的开发成本，提升用户的流失率。

Large Scope 优势：

• 大部分常见问题都能用内建抽象解决
• 集中的设计流程保证了生态系统的一致性

Large Scope 缺点：

• 更高的前期学习障碍
• 若是内建解决方案不适用某个场景，解决问题时可能变得僵化
• 较大的维护面，致使引入重大新特性时成本更高

而 Vue 则是在二者间，作了一个取舍平衡。在此称其为 "Progressive" Scope。

• 一种容许用户以一个渐进的方式有选择地引入特性的分层设计
• 低门槛
• 将常见问题的解决方案官方文档化

在 Vue 3.0 中：

• 保持和 Vue 2 相同连贯的体验
  Router 、 Vuex & test-utils 将分别更新以符合此愿景。
  得益于 tree-shaking 和 Composition APIs ，部分解决方案能获得简化，复用更多逻辑。
  devtools 对 Vuex 状态的追踪也将更为强大。

• 开放更多的底层能力

  • 例如支持自定义 renderer 、 compiler APIs 等。这些在 Vue 2 中其实也支持，可是未在文档中正式将其做为一等 APIs ，也未给出合适的方式去使用他们。
    这些能力，能够实如今 iOS 、 Android 等原生设备上渲染原生视图，甚至能够实现命令行的渲染。它能够在 nodejs 中运行，不要求必定要运行在浏览器中。
  • 开放 compiler pipeline 中更多的底层能力如 parse transform generate APIs 等。供外部工具，如 prettier 、 ESLint 插件等，使用。这样他们不用作相似于模板解析等的重复工做。