Angular/Vue/React 联合教程（二）封装单位

作为处理同一领域问题的工具，Angular， React， Vue 的基础，都是挂载在 document 下的那几个 virsual dom api，比如 createElement，append ...

也因此，在开发思想上，三大框架面临同样的问题，需要相似的解决方案，原理上不会有太大区别

真正将三大框架区分开来的，只有两点：

1. 封装单位
2. 框架生态

什么是封装单位呢？简单来说，就是你的组件（服务，模块），是用什么结构进行包裹的

• Angular - class

• React - function

• Vue - proxy object (代理对象)

这是三大框架被区分开来的根本原因，甚至可以说，任何一个技术栈，都会有因为封装单位而产生的不同主流框架，只是在前端表现为 Angular，React，Vue 而已

为了彻底理解三种封装单位的区别，我们需要细致地了解这三种抽象封装的特性

Class 人类心智的模拟

Class 是什么？

Class 是一个形式系统，是对人类心智的模拟，早在战国时期，我国就有思想家有过 “白马非马” 的表述，意识到了人类思维中，关于抽象概念class和实际事物object的区别

英语中有代词 the，中文中有代词 那个、此，就像一个实例化函数一样，将我们心中的抽象概念，指向现实生活中的具体事物

将具体事物用抽象概念Class指代，我们就能在思维中进行模拟和预演，从而实现

抽象编程

因为天生具有和人类心智的亲和性，class 天生具有 自解释性

因此代码的可读性，可维护性都会比其他封装结构高得多

比如 Angular 的常用工具 Compodoc，就能自动生成一个项目的完整文档和蓝图，可以轻易地理解项目的结构和依赖关系

function 计算的一般抽象

function 是对计算过程的抽象,或者说是对 现实世界数学表述 的抽象

它 接受一个输入,返回一个输出

也因此,在讨论封装性的时候, class 和 object 可以避开不谈, 但是 function 必须单独解释:

函数的封装性,需要保证其返回结果只由输入决定,运行过程中不会产生其他变化

相同的输入,总是会产生相同的输出

是的,这就是在使用 React 时,老生常谈的 ——

不变性！副作用！

因为这个概念在 React 开发中是非常基础且前置的概念，难免会引起很多误解

比如：

• 不变性和副作用在 以函数为基本封装单位的系统中 非常重要，但是在 class 和 object 中没有用处，this 直接可以保证封装性，而在同其他 class，object 进行交互的时候，组合要有效率的多

• 不变性指的是，函数参数在整个函数运行过程中不会变化，而不是指这个参数永远不变

• 直接在函数里运行其他函数会产生副作用，但是将函数作为参数传递再调用就不会有副作用（为啥？之后有关数据流，函数流的内容会阐述）

函数的优势在于运行时，对于一个只由输入输出决定的系统（并且可以嵌套），测试将变得无比简单

函数的组合开发方式，称为函数式，是非常优秀的开发方式，也是很多优秀程序员的终极追求

Proxy Object 直接解决问题

js 有自己的对象机制，与 proxy 进行配合，用户代码也能被框架感知到

既然 js 本身已经有如此易用的机制，为何不直接采用 proxy object 进行封装呢？

Vue 就是采用这样的方案（setup 返回结果，也是向 proxy 添加响应的属性）

可以说，如果你的目标主要就是 解决问题 ，Vue 是个非常方便且易学的方案