| 失效链接处理 |
|
Vue.js在前端开发应用中的性能影响研究 PDF 下蝲
本站整理下蝲Q?/strong>
链接Q?a target="_blank">https://pan.baidu.com/s/1RsE738nJ2qBHXDF8wh2w_w
提取码：(x)o6hj
相关截图Q?/strong>
主要内容Q?/strong>
1 研究背景?qing)意?/div>
因ؓ(f)互联|技术的日新月异Q出C很多新的语言、框
架和新的工具Q让惌学习(fn)软g开发的人，或者是正在开?/div>
目的开发者无法在众多的模型和框架里面选择出最适合
自己的一U。也因ؓ(f)信息技术的不断更新发展QY件开发?/div>
渐变得多样化Q因此需要对目的框架搭Z逻辑l构相当
清晰Q才能够写出优质的Y件。在传统的Y件开发项目中Q?/div>
前后端代码杂，前端与后台的开发没有明的分界U，所
以开发h员不仅要掌握后端开发技术的同时也要熟练前端
开发原理，q就D术业无法专攻Q得开发h员的dJ?/div>
重会(x)影响软g的整体质量，也加大了后期试与Y件维护的
工作强度。所以现在的开发h员普遍希望前端与后台的开?/div>
能够分开Q得Y件开发更加的l构化?/div>
于是Z提高用户体验率以?qing)开发h员的工作效率Q陆
l涌C多种前端架构Q例?MVC、MVVM {，通过程
序模块化来降低前后端的耦合度。引用架构得开发h员只
需要专门负责其中一斚w的开发，提高自n技术的同时也可
以提高Y件的整体质量。其?MVVM 相较?MVC 有低耦合?/div>
独立开发、可重用、可试{优ѝ而本文的目的主要介绍
Z MVVM 模式?Vuejs 框架在虚?DOM、双向数据绑定?/div>
lg开发方面的性能优势Q以?qing)相对于当下行的前端框?/div>
所Ҏ(gu)的优势，提供l开发h员选择 Vue 框架有力参考依据?/div>
2 Vue.js 技术的概述
Vue.js 作ؓ(f)前端开发的渐进式框Ӟ严格遵@ CMD ?/div>
准。同时提供了 MVVM 前端架构模式?Vue 全家桶用于系
l的前端开发。不同于其他的前端开发框ӞVue 是能够从
底层lgC层框架分层次应用Q充分体C Vue 的渐q?/div>
式原理，Vue 的优势主要在于运行速度快、将视图、数据?/div>
l构分离q且作ؓ(f)一个轻量型的框Ӟ使得开发h员更易学
?fn)与理解?/div>
目前 Vue.js 在国内外都收获了很大的关注，其在国
内受到很多开发者的青睐。因?Vue 是针对于前端开发的
框架Q降低前后端代码的耦合度，前端人员只需要担ȝ?/div>
开发的dQ后台负责前端响应的数据处理。两者除了在
数据接口上有不可避免交集Q其他部分的代码完全没有?/div>
pR现在前端开发普遍用文本标记语aQHTMLQ进?/div>
界面设计QHTML 可以很便L(fng)引用 Vue 配合l成 UI 界面Q?/div>
Vue 的组件化开发也使得界面的结构更加清晰、分工细致且
明确?/div>
3 Vue 在前端开发中的应用及(qing)其性能分析
?3.1 虚拟 DOM
DOM 是文对象模型的Uͼ可以讉K和修改一?/div>
文的内容和l构。虚?DOM 实际上是一个虚拟构建的
DOM ?wi)模型，主要区别于实际存在于界面?DOM ?wi)结构?/div>
我们以往使用?DOM 都是实际存在于页面的Q通过 API ?/div>
jQuery ?DOM q行操作Ӟ览器会(x)?DOM ?wi)上所有的
节点逐层执行一遍。尽现在的g讑֤在不断地更新q?/div>
代，要对一个实际存在的 DOM 节点q行频繁的操作，成本
依旧非常的昂贵，q且面性能下降Q用户得不到好的体验
效果。虚?DOM 在很大程度上解决了浏览器性能的问题，
其核心算法是 Diff 法。Diff 法的原理就是在一ơ操作过
E中Q对真实?DOM ?wi)上所有节Ҏ(gu)据进行分析，其?/div>
有改变的数据信息汇聚在一?js 文g里面。然后实施这?/div>
本地?js 文gQ得原来的 DOM ?wi)的节点属性被更改Q从
而通知览器执行界面重新绘制工作。对改变前的 DOM ?/div>
与改变后?DOM ?wi)进?Diff 法分析Q找C|(wi)的最?/div>
转换步骤Q减了大量的无效计。这一q程中用的 js
文g是存在于操作内存的文Ӟ速度明显快很多，很大E度
上提高了性能?/div>
?3.2 双向数据l定
前端开发通常用于 MV * 的开发模式，其中 M (model)
指的是模型，也指的数据，V(view) 指的是界面视图。目
Vue.js 在前端开发应用中的性能影响研究
唐斌斌，叶奕
Q南华大学，湖南衡阳Q?21000Q?/div>
摘要Q由于信息技术的不断更新q代Qh们渐渐的接触到各式各L(fng)应用软g、小E序和网늭互联|应用。这使得用户对前端的使用?/div>
求也逐渐提高Q往往使得技术h员的工作量增加，开发难度也上升。因此出C很多的开发模式与工具Q得开发h员无法选择最合适的
模式和最优的框架。本文将研究当下行的基于MVVM模式的Vue.js在前端开发中的性能优势Q其优势体现在虚拟DOM在时间方面的性能
优势Q双向数据绑定提高渲染效率以辑ֈ更优的用户体验效果，使用lg化的开发得代码可以反复利用，减少了开发h员的工作量。论
文首先介l了Vue技术原理及(qing)其显著特点，接着具体分析每一特有技术的性能特点Q最后通过各方面的性能ȝQ得出此框架相较于当
下其他流行的前端框架的突Zѝ?/div>
关键词：(x)Vue.js 框架Q?MVVM模式Q前端；互联|?/div>
DOI:10.16589/j.cnki.cn11-3571/tn.2020.10.020
软g开?/div>
50 | ?sh)子制?2020 q?05 ?/div>
前几个流行的前端 MVC 框架已经实现了单向数据绑定，?/div>
Vue.js 是根?MVVM 启发而创建的一个框架。MVVM 是一
U前端开发的架构模式Q其核心问题是提供了对 View ?/div>
Model 的双向数据的l定。单向数据绑定只能以单方向从
Model 动?ViewQ而双向数据绑定是?Model ?View
之间通过 ViewMode 兌QViewModel 负责?view q行
数据l定q更Ҏ(gu)型数据，再通知 view Ҏ(gu)览器q行l制?/div>
其模型如?1 所C?/div>
?1
双向数据l定是由数据劫持与发?- 订阅者的设计教学
模式来具体实现的Q首先劫持数据，也就是通过对象属?/div>
的获取函数来劫持对象属性的 setter ?getter 的操作，?/div>
q?getter 获取依赖属性，setter 作ؓ(f)观察者通知 view l制
界面。发?- 订阅者设计模式通常适用于消息队列中Q首?/div>
是用生产者消费者来实现Q其ơ是用户和出版商模型来实
现。订阅者的需要注册到发布者中Q发布者接收到注册来发
布消息，?x)依ơ向各个订阅者发布。也是视图的改变通过
数据l定改变模型数据Q触发相应的数据监听器，通知订阅
者对视图q行更新操作。即可完?View ?Model 的双?/div>
的数据绑定。双向数据绑定是数据是独立触发的Q在览
器渲染过E中节省了很多不必要的数据修改，提高pȝ?/div>
作效率?/div>
?3.3 lg化开?/div>
Vue.js 拓展使用 HTML 语言Q封装可重复使用的代码，
形成lg , x板代码。先单个页面进行宏观布局Q在?/div>
层组件中写好标签Qؓ(f)lg提供容器Q同时在标签属性里?/div>
引用的模板传递参敎ͼ在引用模板传参的q程是就cM
于函C参的q程Q再多个组件汇聚在同一界面上面Q完
成对于整个前端界面设计。组件化开发有利于提高代码的复
用率Q在开发写作中形成一套固有组件格式便于协同开发，
化了调试的步骤ƈ且提高了软g的可l护性?/div>
?3.4 性能优势ȝ
览器渲l制需要加载页面中的所有的资源Q包?/div>
HTML、CSS、JavaScript、图片和其他资源。工作流E将
解析 HTML 来构?DOM ?wi)，解?CSS 来生?CSS 规则?wi)?/div>
然后?DOM ?wi)?CSS 规则?wi)合q生成渲染树(wi) , 来完成页?/div>
的布局。但因ؓ(f) Vue 的响应式pȝ与虚拟的 DOM pȝQ?/div>
Vue 在渲染组件的q程中能够自动追t数据的依赖Qƈ_?/div>
的知晓需要更新数据的具体lgQ渲染之后的lgp
?DOM ?Diff 法取得最的转换步骤Q更新最开始的
DOM ?wi)，在这个过E中QVue 减少了很多传l开发中不必
要的计算与数据更新。Vue 使用 Diff 法的目标是用尽?/div>
能通过单的 API 实现响应式数据进行绑定，使用lg技?/div>
开发以实现复合视图lg?/div>
4 与同cL术比?/div>
Angular.jsQReact.js ?Vue 是当前三大主前端框架?/div>
Vue 相较?AngularQ两者的相同Ҏ(gu)都支持内|的q?/div>
滤器自定义过滤器Q以?qing)内|指令和自定义指令，支持?/div>
向数据绑定提高系l响应能力。两者的不同点在?Angular
对于初学者或者普通开发h员而言学习(fn)成本高，?Vue ?/div>
明的文档Ҏ(gu)学习(fn)与理解。在性能上虽然两者都实现了双
向数据绑定，但是 Angular 依赖于对数据q行脏检查，所
以创建的 Watcher 多Q页面反应速度慢Q用户体验率
下降。Vue.js 使用异步队列更新依赖Z跟踪和观察。数?/div>
的触发只针对于那些有修改的数据信息。因此，在开发大?/div>
应用pȝ的时候，在数据绑定对性能的媄(jing)响差异还是比较显
著的?/div>
Vue 相较?ReactQ两者的相同Ҏ(gu)两者都有自q?/div>
家桶Q即生态圈Q其中包含了开发相对大型Y件必M用的
插g和框架。两者的都实Clg化的开发，一切界面开
发依赖于模板Q都使用了虚?DOM Ҏ(gu)览器q行渲染。但
两者最大的不同也在于虚?DOM 的用。React 依赖于虚
?DOMQ?Vue 只是使用?DOM 模板。React 使用虚拟
DOM 需要将呈现的结果做脏检查。在渲染q程?Vue 可以
_知道数据的变化，?React 是通过比较各个lg来判
断其数据信息是否变化Q过E中?x)引赯多不必要?DOM
渲染Q降低系l性能?/div>
Vue 的优势体现在其文简z更易上手，h灉|的?/div>
单的接口Q在与其他的库、工h者框架结合用时不会(x)
昑־臃肿?该框架不但兼֏向数据绑定技术和虚拟 DOM
技术，q在此基上实Cl合开发，是一个款功能性很?/div>
的轻量型前端框架
|
| Java1234官方?5Q?/td> | 
|
| Java1234官方?5Q?/td> | 838462530 |
苏公|安?32061202001004?/p>
