菜鸟最近闲暇（大的项目没开始，别的项目基本没事了），不知道干啥（刷掘金刷多了，感觉文章都写得差不多，不知道学什么，原因如下：沸点），所以开始看《Vue.js设计与实现》！

第一章

第一章主要是告诉我们要有全局观，在一个大型框架开始的时候就要确定好正确的方向，方向错了，后面的代码写得再好也只是漂亮的屎山！

如何确定好方向？第一章告诉了我们四个点：

1. 编程范式选择
2. 性能与可维护的权衡
3. 性能
4. 运行时？编译时？

了解编程范式

编程范式（Programming paradigm）是指一类典型的编程风格，用于解决问题和编写程序！

编程范式是程序员看待程序应该具有的观点，为了满足不同的场景，提高生产力而诞生的。

编程范式是编程语言的一种分类方式，它并不针对某种编程语言。就编程语言而言，一种编程语言也可以适用多种编程范式。

1. 命令式编程（Imperative Programming） ：

   • 通过明确的语句来改变程序状态（几乎所有计算机的硬件工作都是命令式的）
   • 常见语言：C、Java、Python

2. 面向对象编程（Object-Oriented Programming, OOP） ：

   • 基于对象和类的概念，强调封装、继承和多态（分而治之，解决复杂性的技巧）
   • 常见语言：Java、C++、Python

3. 声明式编程（Declarative Programming） ：

   • 描述 “是什么” 而不是 “怎么做”，关注结果而非过程（函数式和逻辑式是其核心的两种范式）
   • 常见语言：SQL、HTML、CSS

• 3-1. 函数式编程（Functional Programming） ：

  • 强调函数的使用，避免状态和可变数据（声明式中的一种）
  • 常见语言：Haskell、Scala、Erlang

• 3-2. 逻辑编程（Logic Programming） ：

  • 基于逻辑推理，使用规则和事实来进行计算（声明式中的一种）
  • 常见语言：Prolog

4. 事件驱动编程（Event-Driven Programming） ：

   • 通过事件和事件处理器来驱动程序的执行
   • 常见应用：JavaScript在浏览器中的使用

5. 并发编程（Concurrent Programming） ：

   • 处理多个任务同时执行，关注同步和通信
   • 常见语言：Go、Erlang

每种编程范式都有其适用的场景和优势，选择合适的范式可以提高程序的可读性、可维护性和效率。

了解编程范式后，菜鸟感觉好像可以理解vue作者了，首先作者只考虑了两种范式：命令式 和 声明式。至于为什么不考虑别的，感觉可能是因为：

1. js 操作 dom 就是命令式编程
2. html、css 已经是声明式编程了，如果把 js 操作 dom 也搞成声明式，那么可以统一前端范式
3. js 的原型链并不适合面向对象编程，es6 的 class 也只是将原型链封装得像 OOP，不是底层转变了
4. 事件驱动、并发编程和命令式其实都在 js 中体现了，但是操作 dom 是命令式

以上只是菜鸟脑补，真实原因是：

从范式上来看，视图层框架通常分为命令式和声明式，它们各有优缺点。作为框架设计者，应该对两种范式都有足够的认知，这样才能做出正确的选择，甚至想办法汲取两者的优点并将其捏合。

注意

虽然vue给我们的用法是声明式的，但这是因为vue封装了命令式编程，让我们能用到更好用的声明式编程！

问题

为什么视图层框架一定只能是 命令式 和 声明式？为什么不能是OOP、事件驱动编程、并发编程？

懂的读者可以评论一下！

性能和可维护性

确定好了编程范式只能是 命令式 和 声明式，那这两个谁更好维护呢？

答案显而易见，肯定是声明式！

但是：声明式代码的性能不优于命令式代码的性能，《Vue.js设计与实现》 给我们举了个例子：

如果要替换掉div中的文字，原生js会这样

js
 代码解读
复制代码
div.textContent = 'hello vue3' // 直接修改 --> A

很明显没有比这个性能更好的代码了！声明式的代码，需要先找到到前后的差异并只更新变化的地方（B），但是最终完成这次更新的代码仍然是上面的代码（A）！

所以性能对比：

• 命令式代码的更新性能消耗 = A
• 声明式代码的更新性能消耗 = B + A

但是vue为了方便我们后续维护项目，所以选择牺牲了部分性能来替代，框架设计者要做的就是：在保持可维护性的同时让性能损失最小化！

而且这是最简单的修改，但是并不是所有操作都这样简单，要是都是这样简单的操作也不用上框架了。

性能

vue 采用虚拟 DOM 的更新技术的性能理论上不可能比原生 JavaScript 操作 DOM 更高。这很关键，为什么呢？因为在大部分情况下，我们很难写出绝对优化的命令式代码。

注意：

这里书中暂时也没说明虚拟 DOM是什么，但是不影响理解！

但是更多时候我们会对界面进行大量的刷新（但又不用全部刷新），如果用js进行命令式编程，那么我们要写的东西很多，且由于要刷新的东西很多，那么肯定是难以写出最优代码（保证界面只刷新一次的那种代码），就算能写出来也会很难维护且耗费了很多大脑！如果直接用innerHtml，虽然更加简单，但是其每次都需要重绘整个界面，其性能还不如虚拟 DOM，因为虚拟 DOM 只会更新有改变的内容！

这里读者就自己看《Vue.js设计与实现》了（不然整个搞出来，这本书作者要举报我了，手动狗头），反正最后的结果就是：

vue既减少了用户的心智负担，还能更加利于用户后续维护！

如果没书，可以读这篇文章代替这个部分，链接：虚拟 DOM 的性能到底如何，起诉也只起诉别人，手动狗头！

运行时和编译时

这个菜鸟理解的就是，如果一个框架能直接运行，它让你按照它的要求写的东西，那么它就是运行时的框架！如果你想要按照自己的想法写（更自由，但是其实也有限制），那么这个时候框架就要编译你的代码转换成它要求你写的东西，那么其就是编译时+运行时框架！如果它能直接把你按照自己想法写的东西，编译成原生的代码（你想运行的地方可以直接运行），不需要支持任何运行时的东西，那么就是编译时框架！

很显然vue是：编译时+运行时框架！