轻量级响应式框架Vue.js应用分析

陈岩

[摘 要] 传统的dom处理系统需要进行繁杂的选择器进行内容的编写工作，通过逐级操作来还原服务器中需要的JSON格式数据资源，这样的操作方式不仅操作起来繁琐同时也极易容易在数据的输入过程中出现致命的错误。随着科学技术的不断革新，针对传统dom出现的问题，现在可以通过Vue.js的轻量级响应式双向绑定数据信息，对数据的真实变化情况进行实时的监控并映射到数据源上，能够有效的避免前端页面在开发过程中的dom选择器操作复杂程序，简化了WEB在前端开发设计过程中的难度，提升了开发的效率，降低开发的成本投入，缩短了开发时间，提升了微信公众号使用的效果。

[关键词] Vue.js；轻量级；响应式框架；JavaScript；应用研究

doi ： 10 . 3969 / j . issn . 1673 - 0194 . 2018. 03. 075

[中图分类号] TP311 [文献标识码] A [文章编号] 1673 - 0194（2018）03- 0181- 03

0 前 言

科学技术在快速的发展，推动了整个互联网产业化发展进程，在互联网的产业发展中发展态势最好的还是移动互联网产业。移动互联网产业在高速发展地过程中问题也就随之出现了，技术的革新应用如何才能够满足于移动互联网的产业发展所需？在整个WEB项目发展中，前端是整个项目中最重要的组成部分，如何提升前端的技术发展也当下需要重点研究项目。

1 Vue.js软件介绍

Vue.js软件的问世就是为了更好地提高微信公众平台的开发效率，它是在对WEB前端基础框架的开发中进行的深度研究。Vue.js软件与目前市场比较流行的PLOYMER、REACT和ANGULAR相比较，使用量、选择率最高的还是Vue.js框架。Vue.js与其他的软件的框架不同的是，它具有一套完备的用户界面构建模式且是呈现出渐进式的框架结构，Vue.js软件采取的是自下而上的逐渐增减的变量开发设计形式，Vue.js在操作过程中更加的灵活自由，框架结构设计简单、能够方便于使用者快速的熟悉并掌握其全部的使用特征，并将其投入到使用中，同时还能够与第三方数据库已有的项目进行融合，Vue.js响应式框架结构原理如图1所示。

2 Vue.js轻量级响应式框架的应用分析

2.1 WEBPACK的应用研究

WEBPACK是软件前端开发的打包工具，在应用过程中每一次的打包都会进行逐级的项目结构分析，将数据定位在每一个js模块以及其相关的CSS之中，并将二者合并在一起进行打包处理。在使用WEBPACK项目模块进行操作时，由于会接触到不同的加载器，这样就会让繁杂的开发程序分解成一个个独立的小模块，将复发化的WEB前端开发转化成了分层次、分级别的小模块化的软件开发；对于项目的合并之后的文件压缩，能够大大提升文件的传输速度和软件的运行速度，通过不同的PLUGIN插件还能够对程序进行加密处理，保证程序文件的安全性。

2.2 Vue.js软件的安装及使用研究

在发开构建大型的应用软件时，通常都会选用NPM，因为NPM能够更好的配合，如：WEBPACK这类的打包软件配合使用，能够提升运行的效果；Vue.js软件能够为用户提供官方授权的使用工具，能够便于使用者在最短的时间内构建大型的单页应用程序；官方授权的工具中能够提供即开即用的构建工具配置。它具备现代化的WEB网页前端开发设计使用流程，在安装过程中只需要5分钟就能够创建出一个能够重新载入、能够保存静态检查以及符合于使用者使用环境的配置建构。

Vue.js软件是重點针对前端WEB系统开发的，它与以往的JQUERY是完全不一样的，JQUERY的运行原理是通过对DOM数据资源的查询，生成制定的系统所需数据元素，并赋予数据元素特定的数值；在Vue.js软件操作中，是很少能够接触到DOM的操作，Vue.js软件的运行是通过响应式框架的双向进行绑定，赋予元素特定的数值，当页面发生变化时，其数值也会自动发生变化。

2.3 Vue.js软件的运行原理分析

熟悉了解Vue.js软件的运行原理的基础保障就必须要先熟知几个必须知道的概念。OBSERVER是数据的监控器，它的主要作用就是对数据进行监控，对于软件运行中的数据变化它能够准确的进行分析判断，排查数据的属性，然后将监控结果反馈给用户，告知用户哪些数据发生了变化、哪些数据没有发生变化。对于Vue.js软件中的数据指令解析器，即COMPILE，它是针对Vue.js软件中的操作指令进行扫描监控，在扫描之后对数据指令进行解码分析，生成报告。服务器的运行终端就是一个“协调者”的作用，它能够在数据监控器和数据指令解码器之间建立起连接的桥梁，起到调度的作用，并通过数据绑定的指令进行函数的分析，将视图在第一时间内进行更新显示。

目前，广西省的3D打印服务中心平台在全站使用Vue.js软件进行系统功能的开发及使用，在使用的过程中能够在短期内对兼容性的数据框架进行平衡处理。广西省3D打印服务中心的云服务平台使用图如图2所示。

在Vue.js软件运行中进行对象的创建，首先要对创建的对象进行初始化的运行。在这个初始化的运行过程中，OBSERVER会对这个创建对象的所有数据资源属性进行全程的监控。在监控的过程中COMPILE会对WEB页面中的操作指令进行扫描识别，然后根据扫描后的指令结果进行数据编译，将视图进行初始化设置。当软件开始运行时，OBSERVER的监控功能就会发挥出其应用的作用和价值，将所获取到的数据属性变化通知给DEP，在DEP中查找与该属性相同的对象所对应的用户，从而进行视图的实时更新。

2.4 在Vue.js软件中MVVM运行模式研究

随着现代互联网科技的快速发展，用户对于WEB前端框架的应用体验、对于软件的交互式操作流程以及对外观的要求变得越来越高。对于WEB系统中的数据处理以及业务的逻辑操作形式更偏向于前端框架，这就致使WEB前端的工作量变得更大，使数据的代码输入量增大。如果仍旧按照传统的软件开发形式进行WEB前端的开发设计就会造成前期开发的时间长、后期的运营维护的难度变大，软件的扩展操作性变得更差。

为了提升对软件功能的开发速度、开发效率以及数据编程代码的复制使用率，现在很多的专业技术人员将功能的开发转向了网页框架结构方面。先后推出了网页开发制作的MVC和MVVM两种模式，为WEB的前端开发构建了基础平台。基于MVVM模式下的轻量级响应式框架结构的Vue.js设计与应用研究，技术人员通过对Vue.js框架的设计来实现对MVC模式的简化设计。这也是一种典型的设计方案，对软件开发的项目工程进行逻辑层次划分，将具体的项目数据、功能视图和逻辑思维操作进行合理化的分层划分设计。

MVC的项目中主要包含着软件的视图界面，即VIEW、网页视图节目所需要的数据信息，即MODEL以及控制器CONTROLLER，他们协调工作形成了MVC，即这三者的首字母所写组合。在实际的运用过程中视图的界面和视图界面所需的数据资源这两者之间是没有联系的，两者之间是单向的；这一点对于软件的开发和使用有一定的弊端，随之在此基础上出现了MVVM开发形式。

Vue.js软件并不是普通的入侵式前端框架结构资源库，在配合其他数据库的使用过程中，Vue.js软件能够提供庞大的空间。Vue.js软件的核心默认功能不包含路由功能和AJAX功能，它通常实在建立一个应用之中的假定模块构建系统，在使用Vue.js软件时能够有效的去除DOM带来的繁琐应用操作。在使用过程中只需要进行数据源头信息的监控和关注即可，不需要担心因DOM数据元素发生变化之后的数据绑定变化的发生，这也是数据信息驱动与DOM驱动之间的差别。

3 Vue.js软件与React.js软件的对比分析

React.js软件是FACEBOOK公司自主研发制作的软件项目，它的前段框架设计都是采用传统的MVC模式进行设计的，但这传统的运行模式是很难能够满足于FACEBOOK公司的使用需求的，这在当时也是一向很庞大的系统软件开发项目，它包含着非常复杂的逻辑思维结构和复杂繁琐的程序应用代码。对于Vue.js软件与React.js软件，这两款软件之间是存在很多的相似之处的：首先，它们都在使用Virtual DOM；它们都能够提供响应式和组件化的视图结构组件；这两款软件在使用过程中都能够将使用者的注意力集中保持在核心库中。

而对于Vue.js软件与React.js软件之间的不同之处，当软件在对外界用户的視图界面进行渲染时，要通过对REACT和VUE通过抽象来对DOM的操作进行降低，而对于DOM的操作还需要减少对其功能使用的消耗，如：一些繁杂无味的页面运算等，这就是Vue.js软件与React.js软件之间存在的不同之处。在软件的实际运行操作中，经过优化处理的VUE要比未经过处理的REACT运行速度快很多，因为在开发设计过程中VUE通过渲染性的功能改进，能够优化出更加适合于用户使用的界面。

4 结 语

Vue.js的轻量级响应式框架的应用能够更好的与html与js之间的协助，能够与微信公众平台的前端软件框架更好的融洽配合使用，而且还不会影响到现有的功能操作，还能够在原有的基础上开发出更加精准的就算是在相对复杂的场景之中进行操作也不会出现错误问题。大数据驱动时代取代了传统繁琐的dom驱动程序，同时也避免了大量的选择器复杂程序，改革后只需要对数据的源头信息进行关注即可，能够有效的缩短开发的用时，降低开发的难度，提升用户的效用效果。

主要参考文献

[1]易剑波.基于 MVVM 模式的 WEB 前端框架的研究.[J].信息与电脑：理论版，2016（19）.

[2]江庆，叶浩荣.Vue+Webpack 框架在银行 App 前端开发的应用[J].金融科技时代，2016（11）.

[3]孙娉娉，李新，史广军.基于前后端分离的内容管理系统.[J].科研信息化技术与应用，2016（4）.

[4]麦冬，陈涛，梁宗湾.轻量级响应式框架 Vue.js 应用分析[J].信息与电脑：理论版，2017（7）.