基于“Vue.js”前端框架技术的研究
2021-09-27方生
方生
摘要:随着软件产业的快速发展,软件开发已经从如何开发转变为如何更高效、低成本的开发。传统的软件开发技术虽然相对成熟,但由于受其开发效率和成本的制约,越来越不能满足软件产品的开发需求。为了提高软件产品的开发效率,降低开发成本,大量的框架技术和工具迅速普及。而“Vue.js”前端框架技术从众多框架中脱颖而出,成为构建用户界面的前端框架技术之一。该文基于“Vue.js”前端框架技术研究,阐述了“Vue.js”数据驱动和组件化核心思想,并就基于“Vue.js”的单页“Web”应用和项目开发工程化相关技术进行了分析。
关键词:Vue.js;前端框架;数据驱动;组件化
中图分类号:TP311 文献标识码:A
文章编号:1009-3044(2021)19-0059-02
1 背景
近些年来,互联网前端产业发展非常迅速。前端开发不仅广泛应用于“PC”端,也广泛应用于移动终端的前端工程中。为了改变传统的前端开发方式,进一步提高用户体验,越来越多的前端开发人员开始使用前端框架技术来构建前端页面。目前流行的前端框架有“Google”的“AngularJS”“Facebook”的“ReactJS”以及本文研究的“Vue.js”。随着这些框架技术的出现,基于组件的开发方法得到了普及,也改变了原有的开发思路[1]。“Vue.js”秉承了“Angular”“React”这两种框架的优势,而且是中国人开发的,对我们来说,文档应该友好一些,“Vue.js”是目前非常流行的前端框架。
2 “Vue.js”简介
“Vue.js”(读音/vju:/,类似于“view”)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,“Vue.js”采用自底向上增量开发的设计。“Vue.js”是个非常轻量级的工具。其本身具有响应式编程和组件化的特点[2]。
2.1 数据绑定
所谓响应式编程,就是保持状态和视图的同步。在传统的“Web”项目中,将数据在视图中展示出来后,如果需要再次修改视图,需要通过获取“DOM”的方法进行修改,这样才能维持数据和视图一致。而“Vue.js”采用的是“MVVM(Model-View-ViewModel)”的开发模式。这种模式将前端从原始的“DOM”操作中解放出来,我们不再需要花费大量的时间来维护视图和数据的统一,只需要关注数据“Data”的变化。“Vue.js”的核心是一个快速响应的数据绑定系统,在建立绑定之后,“DOM”将和“Vue”对象中的数据“Data”保持同步,这样,就不需要手动获取“DOM”值,然后将其同步到“JS”中,代码变得更加简洁、易于理解[3]。“MVVM”开发模式架构如图1所示。
2.2 组件化
在软件开发中,代码复用是每个程序员所期望的。每个开发人员都希望再次使用以前编写的代码,但又担心引入此代码后对现有程序的影响。之前有两种解决方式,一种是利用“JQuery”插件的形式复用代码。另一种是“requireJS”基于“AMD”模块加载规范,使用回调函数来解决模块按需加载的问题。以上两种方法提供了方便的重用方法,但它们通常需要手动添加所需的“CSS”文件和“HTML”模块。现在“Web”组件的出现提供了一种新的思维方式,通过组件的开发,可以对可重用代码进行封装,并将封装后的代码注册为标签,扩展“HTML”元素的功能[3]65。
组件系统是“Vue.js”的另一个核心思想,我们可以使用可重用的组件来构建大规模应用程序。利用组件化的特点,任何封装的代码都可以注册为标签,大大减少了重复开发,提高了开发效率和代码重用性。几乎任何类型的应用程序界面都可以抽象为组件树,组件树可以由独立的可重用组件组成。
3 “Vue.js”常用插件
“Vue.js”只提供了数据和视图绑定以及组件化功能。如果我们想使用它来开发一个完整的“SPA”(单页应用程序)应用程序,我们还需要使用一些其他功能“Vue.js”插件。“Vue.js”比较常用的插件有“Vue-router”“axios”和“Vuex”等。这三个插件可以分别提供路由管理、数据请求和状态管理的功能。
3.1 “Vue router”路由管理
“Vue router”是给“Vue.js”提供路由管理的插件,通过“hash”与“History interface”两种方式实现前端路由。过去,页面之间的跳转是由后端“MVC”中的控制器“Controller”层控制,通过超级链接,我们将向服务器发送请求,服务器响应后,根据接收到的信息获取数据并分配相应的模板,将其渲染为“HTML”,然后返回浏览器解析为可见页面。“Vue.js + Vue router”的组合将这组逻辑放在前端,切换到相应的组件,然后从后端请求数据,填充模板,在浏览器端完成“HTML”的渲染,这有助于分离前端和后端,前端不依赖后端逻辑,只需要后端提供数据接口[3]88。“Vue router”的基本作用是将每条路径映射到相应的组件上,并通过修改路由在组件之间进行切换。“SPA”的核心就是前端路由[4]。
3.2 “axios”数据请求
在实际开发单页面应用过程中,通常和后端都会使用异步接口进行数据交互。传统情况下,我们使用“jQuery”的“$.ajax()”方法来做异步请求。从“Vue.js 2.0”版本之后,官方推荐使用“axios”来实现“Ajax”请求。“Axios”是一个基于“promise”的“HTTP”客户端,它的主要特点如下:
1) 从浏览器中创建“XMLHttpRequest”;
2) 從“node.js”发出“HTTP”请求;