VueJs条件的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 View Model。它的侧重点在于用事件驱动的UI平台的开发。即View的转变会主动更新到View Model, 而View Model的转变也会主动同步到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使用了异步批量处理方法, 所以会特别很是快速, 同时它还可以将每个组件进行一系列组合, 这样对于程序的解耦性和重用性都得到了大大提升。