1.3　Vue与主流前端框架的对比

由于Vue在各方面都比较出众，所以总会避免不了将它与其他的框架对比。接下来将从两个方面来介绍Vue与其他主流前端框架相比的相同点、不同点、优点及缺点。

1．Vue与传统DOM框架对比

在与传统框架对比前，首先需要了解网页的渲染流程。网页的加载顺序如下：

（1）网页加载初期，浏览器的HTML解析器会解析网页内部的所有HTML代码并将其构建成一棵DOM树。

（2）浏览器使用CSS解析器，分析CSS文件和元素上的内联样式，最终构建StyleRules。

（3）将DOM树和StyleRules关联起来构建成一棵Render树，这个过程又被称为Attachment。每个DOM节点都有attach方法，用来接收样式信息，最后返回一个renderer对象，这些renderer对象最终会被构建成一棵Render树。

（4）Render树的每个节点开始进行内部计算，计算的目的是算出每个元素在网页中应该显示的精确的坐标及占用的大小，所以网页中实际展示的元素的位置和大小，最终还是通过不同节点间的关系计算出物理坐标点展示在坐标系中。

（5）有了精确位置后，浏览器会调用每个节点的paint方法来将其按照节点本身的位置和样式渲染到网页上，形成最后人眼看到的效果。

了解了网页进行一次渲染的过程后可知，操作一次DOM对象会触发至少步骤（4）到（5）的重复执行，如果涉及复杂操作还会触发步骤（3）的重复执行。

传统DOM框架在操作视图交互或变更时，首先需要获取DOM对象，这个操作需要从DOM树的根节点遍历到需要操作的节点为止。由于DOM操作的流程是同步执行的，假设当前有10次更新DOM的操作，在浏览器的JavaScript解释器运行到第一次DOM变更时，并不知道后续还有9个DOM操作，所以浏览器就会直接将本次DOM操作执行一次。当运行到下一次DOM操作时，第一次修改元素的坐标已经重新计算了。这样的操作直到第10次运行结束才会结束，瞬间执行完毕的代码只会让浏览器呈现最后一次改动的结果，前9次更新就相当于做了无用功。如果10次改动的是相同的几个DOM对象的属性，则浏览器就浪费了9次的渲染性能，这个开销按照现在的硬件水平也是相当大的。

Vue框架在视图更新上选择使用虚拟DOM进行视图操作。在视图渲染初期，Vue会将其内部的虚拟节点和真实DOM捕获的节点合成一棵虚拟DOM树。合成后Vue会将其合并到真实DOM对象中。在视图更新时，使用Vue框架无须获取DOM对象，而是直接将Vue中定义好的与视图关联的JavaScript变量进行修改。当有多个数据被修改时，Vue并不会直接将每次修改都进行一次渲染，而是在一个修改周期内统计所有改动的属性并将其异步地插入队列中。插入队列后的数据会在本轮修改确认完毕后统一地映射到虚拟的DOM树中，最后通过PATCH方法将虚拟DOM树中变化的节点信息替换到真实的DOM对象中，实现页面的更新。这样的操作使在Vue中一个修改周期内多次修改的数据，在最后才被一次性地渲染到页面上，实现多次修改一次渲染的效果。这种配合虚拟DOM异步更新视图的方式可以将传统DOM操作中耗费的性能节省下来，让网页运行的速度更快。

2．Vue与其他虚拟DOM框架对比

目前全世界范围内生态完善且流行的主流虚拟DOM框架有Angular、React和Vue。其他框架也在小范围流行，所以开发者避免不了将这些框架进行对比。

在介绍Vue的作者时已经从中得知，Vue创建的初衷是借鉴Angular的优点并使框架更轻量，Vue框架早期与Angular相比有完善的响应式数据系统和视图渲染能力，并在吸收优点的基础上排除了Angular的缺点，这使Vue在早期版本中比早期版本的Angular更加受开发者喜爱，尤其是国内开发者。在后续的版本更新中Vue又吸取了React的优点，加入了更多的函数式编程及高度自由的模块化开发方式。Vue与其他两大框架相比生态完善，性能相差无几，并且吸收了Angular及React的很多优点，所以Vue是不逊色于Angular和React的。在开发层面，Vue框架对开发者更加友好，它致力于处理渲染和底层能力的输出，开发者只需关注业务流程和数据操作，所以在此方面Vue收到了大多数国内开发者的好评。

就性能、生态和受欢迎度等方面而言，Vue在行业内，尤其是国内的前端开发领域已经被绝大多数的开发者认可。笔者也因此契机编写本书，用以帮助更多Vue开发者少走弯路。

3．掌握什么知识才能成为Vue开发者

如果想成为Vue开发者并希望无障碍阅读本书内容首先需要掌握如下技能：

（1）具备HTML、CSS设计型语言开发基础，有布局开发简单静态网页的经验。

（2）掌握JavaScript语言编程基础，对DOM操作有一定的了解，可以独立实现简单的界面交互功能。

（3）对ECMA标准有一定的认识，了解ES5-ES2022的特性并有实际的应用能力。

（4）熟练使用传统的DOM框架进行网页开发。

（5）对Promise有一定的了解，懂JavaScript异步编程的规范，了解async及await异步控制方式。

（6）对Ajax技术有一定的了解，可以通过JavaScript发送网络请求并实现界面的动态渲染。