Vue3设计原理浅析

本文尝试解答如下问题：

• 前端框架为何而来？

• 虚拟DOM到底怎么样？

• Vue3为何如此设计？

前端框架历史

HTML、CSS、JS三件套时代

在30年前，互联网刚出现时，多数网页都是静态页，主要功能就是展示信息，而前端大部分工作就是让写写HTML+CSS，将内容合理、美观的展示出来，此时前端工作简单，也没有明确的前端工作师这一岗位。

随着后端的发展，后端提出了MVC（Model、View、Controller）模式，这个模式至今依旧使用，比如Python Flask框架，其中Model层用于处理数据，View层用于展示数据、Controller层用于实现逻辑代码，那时发展起来的多数后端框架都可以通过模板的形式，直接将前端内容集成到后端项目中，后端会结合Model层的数据，渲染出页面再返回给浏览器。

此时，页面中的内容可以根据后端数据库或逻辑发生相应的改变，这就是所谓的动态网页，但此时网页内容更新依旧需要刷新整个页面，直到2004年，Google推出了Gmail，提出来Ajax技术让网页可以通过异步的方式获取数据，结合JavaScript便可以做到页面的局部更新，随后，前端渐渐不再受限于后端模板，前端开始新进程。

JQuery时代

Ajax技术出现后，前端依旧面临着浏览器兼容的问题，同一个JS逻辑，为了兼容不同的浏览器，可能需要写出不同的代码，此时JQuery横空出世，JQuery将很多兼容问题和非业务的技术细节进行封装，让你一个$走天下，那时JQuery+Bootstrap是前端开发主流技术栈，也是在这个时间点，我第一次接触前端开发，代码形式如下：

$('#btn').on('click', function() {
  $('#name').val('hello world')
}

那时写前端，就是利用JQuery对网页中的DOM节点进行操作，利用JQuery封装的方法发起Ajax，然后动态替换HTML内容并配合Bootstrap使用，当时我还购买了Bootstrap相关的书籍学习Bootstrap的设计，被其栅格系统秀到了，当时一套HTML可兼容移动端和PC端还是挺新奇的。

现代前端框架时代

早年开发前端都需要搭配后端服务，比如PHP利用WampServer来在本地构建一个Web服务配合前端开发，但在2009年Node.js诞生了，前端进行工程化时代，利用Node.js，express、Koa等基于Nodejs实现的Web后端框架成批出现，前端也出了Angular、Vue、React三大框架。

Angular、Vue、React三大框架都遵循MVVM模式，即数据驱动页面，不同框架目标一致，但实现目标的技术手段有所不同。

Angular 1 在2009年被提出，该框架会监控用户的交互行为，用户每一次网页交互都会检查数据是否变化，如果变化了，则利用JS动态更新网页的DOM结构，这种方向，效率一般，但却是最早的数据驱动页面的解决方案，又有Google背书，推出后迅速占领MVVM市场。

虽然Angular 1实现了目标，但技术设计比较一般，Augular团队自断双臂，放弃Angular 1，使用TypeScript构建权限框架Angular（没错，还叫这名），设计更加优先，但语法糖变动较大且不兼容Angular 1，导致Angular 1的很多用户放弃了Angular 1。Google似乎就喜欢这样搞，TensorFlow早年在深度学习框架市场上占绝对大头，但语法多变，没错版本更新，都要像使用新框架一样重新学习，从而让PyTorch后来居上。

再来看看Vue，无论是Vue 1还是现在的Vue 3，Vue的大思路都是监控数据变化，当数据变化时，再同步去修改相关的DOM结构，Vue的响应式系统来实现这个功能，不同版本的Vue实现响应式系统的技术方案不同，在下一篇文章再仔细聊。

Facebook也推出了React框架，React推出时使用了与当前Angular和Vue都不同的技术路线，除了相应系统，它还提出了虚拟DOM，即利用JS来描述网页的DOM树，这样利用其Diff算法可以快速的定位出变化的数据，从而实现对网页内容的修改，但实际上虚拟DOM的优势并不在速度，而在于对框架使用者而