《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 插件等，使用。这样他们不用做类似于模板解析等的重复工作。