| 失效链接处理 |
|
Vue.js在前端开发应用中的性能影响研究 PDF 下载
本站整理下载：
提取码：o6hj
相关截图：
主要内容：
1 研究背景及意义
因为互联网技术的日新月异，出现了很多新的语言、框
架和新的工具，让想要学习软件开发的人，或者是正在开发
项目的开发者无法在众多的模型和框架里面选择出最适合
自己的一种。也因为信息技术的不断更新发展，软件开发逐
渐变得多样化，因此需要对项目的框架搭建与逻辑结构相当
清晰，才能够写出优质的软件。在传统的软件开发项目中，
前后端代码混杂，前端与后台的开发没有明确的分界线，所
以开发人员不仅要掌握后端开发技术的同时也要熟练前端
开发原理，这就导致术业无法专攻，使得开发人员的任务繁
重会影响软件的整体质量，也加大了后期测试与软件维护的
工作强度。所以现在的开发人员普遍希望前端与后台的开发
能够分开，使得软件开发更加的结构化。
于是为了提高用户体验率以及开发人员的工作效率，陆
续涌现了多种前端架构，例如 MVC、MVVM 等，通过将程
序模块化来降低前后端的耦合度。引用架构使得开发人员只
需要专门负责其中一方面的开发，提高自身技术的同时也可
以提高软件的整体质量。其中 MVVM 相较于 MVC 有低耦合、
独立开发、可重用、可测试等优势。而本文的目的主要介绍
基于 MVVM 模式的 Vuejs 框架在虚拟 DOM、双向数据绑定、
组件开发方面的性能优势，以及相对于当下流行的前端框架
所特有的优势，提供给开发人员选择 Vue 框架有力参考依据。
2 Vue.js 技术的概述
Vue.js 作为前端开发的渐进式框架，严格遵循 CMD 标
准。同时提供了 MVVM 前端架构模式和 Vue 全家桶用于系
统的前端开发。不同于其他的前端开发框架，Vue 是能够从
底层组件到上层框架分层次应用，充分体现了 Vue 的渐进
式原理，Vue 的优势主要在于运行速度快、将视图、数据、
结构分离并且作为一个轻量型的框架，使得开发人员更易学
习与理解。
目前 Vue.js 在国内外都收获了很大的关注，尤其在国
内受到很多开发者的青睐。因为 Vue 是针对于前端开发的
框架，降低前后端代码的耦合度，前端人员只需要担任界面
开发的任务，后台负责前端响应的数据处理。两者除了在
数据接口上有不可避免交集，其他部分的代码完全没有联
系。现在前端开发普遍用超文本标记语言（HTML）进行
界面设计，HTML 可以很便捷的引用 Vue 配合组成 UI 界面，
Vue 的组件化开发也使得界面的结构更加清晰、分工细致且
明确。
3 Vue 在前端开发中的应用及其性能分析
■ 3.1 虚拟 DOM
DOM 是文档对象模型的简称，可以访问和修改一个
文档的内容和结构。虚拟 DOM 实际上是一个虚拟构建的
DOM 树模型，主要区别于实际存在于界面的 DOM 树结构。
我们以往使用的 DOM 都是实际存在于页面的，通过 API 和
jQuery 对 DOM 进行操作时，浏览器会将 DOM 树上所有的
节点逐层执行一遍。尽管现在的硬件设备在不断地更新迭
代，要对一个实际存在的 DOM 节点进行频繁的操作，成本
依旧非常的昂贵，并且页面性能下降，用户得不到好的体验
效果。虚拟 DOM 在很大程度上解决了浏览器性能的问题，
其核心算法是 Diff 算法。Diff 算法的原理就是在一次操作过
程中，对真实的 DOM 树上所有节点数据进行分析，将其中
有改变的数据信息汇聚在一个 js 文件里面。然后实施这个
本地的 js 文件，使得原来的 DOM 树的节点属性被更改，从
而通知浏览器执行界面重新绘制工作。对改变前的 DOM 树
与改变后的 DOM 树进行 Diff 算法分析，找到两棵树的最少
转换步骤，减少了大量的无效计算。这一过程中使用的 js
文件是存在于操作内存的文件，速度明显快很多，很大程度
上提高了性能。
■ 3.2 双向数据绑定
前端开发通常用于 MV * 的开发模式，其中 M (model)
指的是模型，也指的数据，V(view) 指的是界面视图。目
Vue.js 在前端开发应用中的性能影响研究
唐斌斌，叶奕
（南华大学，湖南衡阳，421000）
摘要：由于信息技术的不断更新迭代，人们渐渐的接触到各式各样的应用软件、小程序和网页等互联网应用。这使得用户对前端的使用要
求也逐渐提高，往往使得技术人员的工作量增加，开发难度也上升。因此出现了很多的开发模式与工具，使得开发人员无法选择最合适的
模式和最优的框架。本文将研究当下流行的基于MVVM模式的Vue.js在前端开发中的性能优势，其优势体现在虚拟DOM在时间方面的性能
优势，双向数据绑定提高渲染效率以达到更优的用户体验效果，使用组件化的开发使得代码可以反复利用，减少了开发人员的工作量。论
文首先介绍了Vue技术原理及其显著特点，接着具体分析每一项特有技术的性能特点，最后通过各方面的性能总结，得出此框架相较于当
下其他流行的前端框架的突出优势。
关键词：Vue.js 框架； MVVM模式；前端；互联网
DOI:10.16589/j.cnki.cn11-3571/tn.2020.10.020
软件开发
50 | 电子制作 2020 年 05 月
前几个流行的前端 MVC 框架已经实现了单向数据绑定，而
Vue.js 是根据 MVVM 启发而创建的一个框架。MVVM 是一
种前端开发的架构模式，其核心问题就是提供了对 View 和
Model 的双向数据的绑定。单向数据绑定只能以单方向从
Model 流动到 View，而双向数据绑定是将 Model 与 View
之间通过 ViewMode 关联，ViewModel 负责对 view 进行
数据绑定并更改模型数据，再通知 view 对浏览器进行绘制。
其模型如图 1 所示。
图 1
双向数据绑定是由数据劫持与发布 - 订阅者的设计教学
模式来具体实现的，首先劫持数据，也就是通过对象属性
的获取函数来劫持对象属性的 setter 与 getter 的操作，通
过 getter 获取依赖属性，setter 作为观察者通知 view 绘制
界面。发布 - 订阅者设计模式通常适用于消息队列中，首先
是使用生产者消费者来实现，其次是用户和出版商模型来实
现。订阅者的需要注册到发布者中，发布者接收到注册来发
布消息，会依次向各个订阅者发布。也就是视图的改变通过
数据绑定改变模型数据，触发相应的数据监听器，通知订阅
者对视图进行更新操作。即可完成 View 与 Model 的双向
的数据绑定。双向数据绑定是数据是独立触发的，在浏览
器渲染过程中节省了很多不必要的数据修改，提高系统工
作效率。
■ 3.3 组件化开发
Vue.js 拓展使用 HTML 语言，封装可重复使用的代码，
形成组件 , 即模板代码。先将单个页面进行宏观布局，在上
层组件中写好标签，为组件提供容器，同时在标签属性里面
为要引用的模板传递参数，在引用模板传参的过程是就类似
于函数传参的过程，再将多个组件汇聚在同一界面上面，完
成对于整个前端界面设计。组件化开发有利于提高代码的复
用率，在开发写作中形成一套固有组件格式便于协同开发，
简化了调试的步骤并且提高了软件的可维护性。
■ 3.4 性能优势总结
浏览器渲绘制需要加载页面中的所有的资源，包括
HTML、CSS、JavaScript、图片和其他资源。工作流程将
解析 HTML 来构建 DOM 树，解析 CSS 来生成 CSS 规则树，
然后将 DOM 树与 CSS 规则树合并生成渲染树 , 来完成页面
的布局。但因为 Vue 的响应式系统与虚拟的 DOM 系统，
Vue 在渲染组件的过程中能够自动追踪数据的依赖，并精
确的知晓需要更新数据的具体组件，渲染之后的组件由虚
拟 DOM 的 Diff 算法取得最少的转换步骤，更新最开始的
DOM 树，在这个过程中，Vue 减少了很多传统开发中不必
要的计算与数据更新。Vue 使用 Diff 算法的目标是用尽可
能通过简单的 API 实现响应式数据进行绑定，使用组件技术
开发以实现复合视图组件。
4 与同类技术比较
Angular.js，React.js 与 Vue 是当前三大主流前端框架。
Vue 相较于 Angular，两者的相同点是都支持内置的过
滤器自定义过滤器，以及内置指令和自定义指令，支持双
向数据绑定提高系统响应能力。两者的不同点在于 Angular
对于初学者或者普通开发人员而言学习成本高，而 Vue 有
简明的文档容易学习与理解。在性能上虽然两者都实现了双
向数据绑定，但是 Angular 依赖于对数据进行脏检查，所
以创建的 Watcher 越多，页面反应速度越慢，用户体验率
下降。Vue.js 使用异步队列更新依赖基于跟踪和观察。数据
的触发只针对于那些有修改的数据信息。因此，在开发大型
应用系统的时候，在数据绑定对性能的影响差异还是比较显
著的。
Vue 相较于 React，两者的相同点是两者都有自己的全
家桶，即生态圈，其中包含了开发相对大型软件必须使用的
插件和框架。两者的都实现了组件化的开发，一切界面开
发依赖于模板，都使用了虚拟 DOM 对浏览器进行渲染。但
两者最大的不同也在于虚拟 DOM 的使用。React 依赖于虚
拟 DOM，而 Vue 只是使用了 DOM 模板。React 使用虚拟
DOM 需要将呈现的结果做脏检查。在渲染过程中 Vue 可以
精确知道数据的变化，而 React 是通过比较各个组件来判
断其数据信息是否变化，过程中会引起许多不必要的 DOM
渲染，降低系统性能。
Vue 的优势体现在其文档简洁更易上手，具有灵活的、
简单的接口，在与其他的库、工具或者框架结合使用时不会
显得臃肿。 该框架不但兼顾双向数据绑定技术和虚拟 DOM
技术，还在此基础上实现了组合开发，是一个款功能性很强
的轻量型前端框架
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
