基于VueJs的WEB前端开发研究

徐頔 朱广华 贾瑶

DOI：10.19392/j.cnki.16717341.201714060

摘要：Vue.js是时下非常流行的一种WEB前端开发技术，这种技术是基于MVVM架构[1]的模式，而这种MVVM架构模式是一种新型的模式，它只要是在经典的MVC模式[2]上衍生出来的。笔者先是对关于Vue.js的MVVM架构模式进行了简单的介绍，然后对Vue.js的运行原理进行了一系列的阐述，最后通过与一个典型基于MVVM架构模式的React.js框架进行对比，通过对比总结Vue.js的优势所在。

关键词：MVVM；Vue.js；Web

科学技术在飞速发展，随之也带动了整个互联网产业，而在整个互联网产业中发展势头最猛的要当数移动互联网产业了。移动互联网的高速发展的同时却也为互联网技术带来了严重考验。那么在整个Web项目当中，前端在整个项目中的作用是不言而喻的，如何能把前端技术变的越来越高效也是行业学者们茶余饭后的热门话题。在这种大趋势下，Vue.js横空出世，是时下最火的前端技术之一。下面笔者将带你走入Vue.js的世界。

1 在Vue.js中的MVVM模式

传统的MVC模式是软件工程中一种经典的设计模式，它是对一个项目工程进行逻辑层次的划分，将项目数据，功能视图与逻辑操作进行分层设计。其中MVC分别是Model，View和Controller首字母的缩写，在项目中，View是软件的视图界面，Model是为视图界面所需的数据，控制器Controller是View和Model的协调者，View和Model不直接聯系，基本联系都是单向的。但是随着互联网飞速发展，在此基础上衍生出了MVVM开发模式。

MVVM模式的全称为Model View ViewModel。它的侧重点在于用事件驱动的UI平台的开发。即View的变化会自动更新到ViewModel，而ViewModel的变化也会自动同步到View上显示。MVVM的本质是通过数据绑定链接View和Model，让数据的变化自动映射为视图的更新。

对于需要动态更新的DOM节点来说，Vue.js会为其创建一个指令对象。而对于指令对象来说，如果其数据发生变化的时候，便会对操作与之匹配的节点，进行相应的Dom操作。Vue为每个Dom操作都进行了封装，使它们成为Vue特定指令，这样关于业务代码量在无形之中得到了很好的改善，对于系统的開发投入和日后的维护投入都得到了大大降低。

2 Vue.js的运行原理

在介绍Vue.js运行原理之前，先要介绍几个概念。Observer本质是一个数据监听器，不言而喻它是起到一个监听的作用，对于数据对象中的所有属性，它都能够对其监听，告知订阅者哪些属性发生了变化和发生了哪些变化。对于指令解析器Compile，它是对Vue.js中的指令进行扫描，并对扫描后的指令进行解析编译。Watcher相当于一个协调者，它主要的作用是在Observer和Compile之间建立起连接，它不但能够接收来自Observer的属性变化通知，而且从中起到一个调度的作用，并执行指令绑定的相应的回调函数，从而更新视图。

在Vue创建一个对象时，首先会为这个对象进行一个初始化的过程。在初始化的过程中，Observer会一直对这个对象所有的属性进行监听，同时Compile会扫描Web页面中的指令，对扫描后的指令进行编译，并会初始化视图。而Watcher会在Dep中添加一个订阅者。

当系统一旦运行起来，Observer监听器就会获取属性变化并通知Dep，在Dep中会查找与该属性对象对应的订阅者，并向添加该订阅者的Watcher发送变化通知，从而对视图进行相应的更新。

3 Vue.js与React.js的对比

React.js最早的时候是Facebook公司的自己做的一个项目， 当时的前端框架都是基于传统的MVC模式，但是传统的MVC却很难满足Facebook公司当时的要求。因为当时项目是一个很庞大的项目，包含非常复杂的逻辑结构和相当多的程序代码，所以便诞生了React.js。

首先Vue.js与React.js是有很多相似之处：

1）使用 Virtual DOM。

2）提供了响应式（Reactive）和组件化（Composable）的视图组件。

3）将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。

本文侧重比较Vue.js与React.js不同之处，并通过比较体现Vue.js的优势所在，所以这里不再对相似之处进行赘述。

对于Vue.js与React.js不同之处笔者通过一个小例子进行对比。当我们对用户界面进行渲染时候，为了降低Dom的操作React和Vue都是通过Virtual Dom抽象层来实现这一要求，对于必要的Dom 操作以外，必须要减少另外功能的消耗，比如一些页面运算等等。这就是 Vue 和 React 存在的不同之处。为了证明这点，我们建立了一个简单的参照项目，它负责渲染 10000个列表项 100 次。

为了客观的得到实验结果，笔者对实验项目进行了二十次的运行，并获取各自运行中产生的最好结果。通过运行结果可以明显的看出未经优化的 Vue 相比未经优化的 React 要快的多。由于 Vue 改进过渲染性能，甚至全面优化过的 React 通常也会慢于开箱即用的 Vue。

渲染性能只有Vue的强大性能之一，相比其他前端库Vue还具很多特点，首先Vue.js是一个轻量级的前端库，上手简单，对于新手来说不需要太多的时间就可以学会。对于DOM的更新，Vue使用了异步批量处理方式，所以会非常快速，同时它还可以将每个组件进行一系列组合，这样对于程序的解耦性和重用性都得到了大大提高。

4 结语

随着前端的快速发展，无论是用户界面还是业务处理逻辑都变得越来越复杂使用原生Java Script或jQuery去操控DOM 变得越来越不现实。框架的学习固然有一定的成本，但是当 Web应用的功能和复杂度达到一定的程度时，使用优秀的MVVM框架，例如Vue.js反而在总体上会更节约成本。

参考文献：

[1]刘立.MVVM 模式分析与应用[J]. 微型电脑应用，2012，28（12）：5760.

[2]许鑫，费翔林.基于MVC 模式的应用软件开发框架研究[J].计算机工程与应用，2005，41（30）：102104.