VueJS - 概述

---

---

VueJS是一个开源的渐进式JavaScript框架，用于开发交互式Web界面。它是简化Web开发的著名框架之一。VueJS专注于视图层。它可以轻松地集成到大型前端开发项目中，没有任何问题。

VueJS的安装非常容易上手。任何开发人员都可以轻松地理解并在短时间内构建交互式Web界面。VueJS由前Google员工尤雨溪创建。VueJS的第一个版本于2014年2月发布。它最近在GitHub上获得了64,828颗星，使其非常受欢迎。

特性

以下是VueJS提供的特性。

虚拟DOM

VueJS使用虚拟DOM，其他框架（如React、Ember等）也使用虚拟DOM。更改不会对DOM进行，而是创建一个DOM的副本，该副本以JavaScript数据结构的形式存在。每当需要进行任何更改时，都会对JavaScript数据结构进行更改，然后将后者与原始数据结构进行比较。然后，最终更改将更新到真实的DOM，用户将看到这些更改。这在优化方面很好，成本较低，并且可以更快地进行更改。

数据绑定

数据绑定功能有助于使用VueJS提供的称为v-bind的绑定指令来操作或为HTML属性赋值、更改样式、分配类。

组件

组件是VueJS的重要特性之一，它有助于创建可在HTML中重用的自定义元素。

事件处理

v-on是添加到DOM元素上的属性，用于在VueJS中监听事件。

动画/过渡

VueJS提供各种方法，可在将HTML元素添加到DOM、更新或从DOM中删除时为其应用过渡。VueJS有一个内置的过渡组件，需要将其包装在元素周围以实现过渡效果。我们可以轻松地添加第三方动画库，并为界面添加更多交互性。

计算属性

这是VueJS的重要特性之一。它有助于监听对UI元素所做的更改并执行必要的计算。无需为此添加额外的代码。

模板

VueJS提供基于HTML的模板，用于将DOM与Vue实例数据绑定。Vue将模板编译成虚拟DOM渲染函数。我们可以使用模板或渲染函数，为此，我们必须用渲染函数替换模板。

指令

VueJS具有内置指令，例如v-if、v-else、v-show、v-on、v-bind和v-model，这些指令用于在前端执行各种操作。

侦听器

侦听器应用于更改的数据。例如，表单输入元素。在这里，我们不必添加任何额外的事件。侦听器负责处理任何数据更改，使代码简单快捷。

路由

页面间的导航借助vue-router完成。

轻量级

VueJS脚本非常轻量级，性能也很快。

Vue-CLI

VueJS可以使用vue-cli命令行界面在命令行中安装。它有助于使用vue-cli轻松构建和编译项目。

与其他框架的比较

现在让我们将VueJS与其他框架（如React、Angular、Ember、Knockout和Polymer）进行比较。

VueJS 与 React

虚拟DOM

虚拟DOM是DOM树的虚拟表示。使用虚拟DOM，创建一个与真实DOM相同的JavaScript对象。任何时候都需要对DOM进行更改时，都会创建一个新的JavaScript对象并进行更改。稍后，比较这两个JavaScript对象，并在真实DOM中更新最终更改。

VueJS和React都使用虚拟DOM，这使其速度更快。

模板与JSX

VueJS分别使用html、js和css。对于初学者来说，理解和采用VueJS风格非常容易。VueJS的基于模板的方法非常简单。

React使用jsx方法。ReactJS中的一切都是JavaScript。HTML和CSS都是JavaScript的一部分。

安装工具

React使用create react app，而VueJS使用vue-cli /CDN/npm。两者都非常易于使用，并且项目已设置了所有基本需求。React需要webpack进行构建，而VueJS不需要。我们可以使用cdn库在jsfiddle或codepen中的任何位置开始VueJS编码。

流行度

React比VueJS更流行。React的就业机会比VueJS更多。React背后有一个大公司，即Facebook，这使其更受欢迎。由于React使用JavaScript的核心概念，因此它使用了JavaScript的最佳实践。使用React的人肯定非常精通所有JavaScript概念。

VueJS是一个正在发展的框架。目前，与React相比，VueJS的就业机会较少。根据一项调查，许多人正在采用VueJS，这可能会使其比React和Angular更受欢迎。一个良好的社区正在开发VueJS的不同特性。vue-router由这个社区维护，并定期更新。

VueJS汲取了Angular和React的优点，并构建了一个强大的库。由于其轻量级的库，VueJS比React/Angular快得多。

VueJS 与 Angular

相似之处

VueJS与Angular有很多相似之处。诸如v-if、v-for之类的指令几乎与Angular的ngIf、ngFor相似。它们都有一个命令行界面来安装项目并构建项目。VueJS使用Vue-cli，而Angular使用angular-cli。两者都提供双向数据绑定、服务器端渲染等。

复杂性

Vuejs非常容易学习和上手。如前所述，初学者可以使用VueJS的CDN库，并在codepen和jsfiddle中开始使用。

对于Angular，我们需要经过一系列步骤才能安装，对于初学者来说，开始使用Angular有点困难。它使用TypeScript进行编码，对于来自核心JavaScript背景的人来说比较困难。但是，对于来自Java和C#背景的用户来说，它更容易学习。

性能

要确定性能，取决于用户。VueJS文件大小比Angular轻得多。框架性能的比较，请访问以下链接 http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

流行度

目前，Angular比VueJS更流行。许多组织使用Angular，使其非常受欢迎。Angular经验丰富的候选人的就业机会也更多。但是，VueJS正在占据市场份额，可以被认为是Angular和React的有力竞争对手。

依赖项

Angular提供了许多内置功能。我们必须导入所需的模块并开始使用它，例如，@angular/animations、@angular/form。

VueJS没有像Angular那样多的内置功能，需要依赖于第三方库才能工作。

灵活性

VueJS可以轻松地与任何其他大型项目合并，没有任何问题。Angular在与任何其他现有项目一起工作时不会那么容易。

向后兼容性

我们有AngularJS、Angular2和现在的Angular4。AngularJS和Angular2之间存在巨大差异。由于核心差异，使用AngularJS开发的项目应用程序无法转换为Angular2。

VueJS的最新版本是2.0，并且具有良好的向后兼容性。它提供了良好的文档，非常容易理解。

TypeScript

Angular使用TypeScript进行编码。用户需要了解TypeScript才能开始使用Angular。但是，我们可以使用cdn库在jsfiddle或codepen中的任何位置开始VueJS编码。我们可以使用标准JavaScript，这很容易上手。

VueJS 与 Ember

相似之处

Ember提供Ember命令行工具，即ember-cli，用于轻松安装和编译Ember项目。

VueJS也有一个命令行工具vue-cli来启动和构建项目。

它们都具有路由、模板和组件等功能，使其成为非常丰富的UI框架。

性能

VueJS的性能比Ember更好。Ember添加了glimmer渲染引擎，旨在提高重新渲染性能，这与VueJS和React使用虚拟DOM的概念类似。但是，与Ember相比，VueJS具有更好的性能。

VueJS 与 Knockout

Knockout提供了良好的浏览器支持。它支持较低版本的IE，而VueJS不支持IE8及以下版本。Knockout的开发速度随着时间的推移而减慢。最近它并没有那么受欢迎。

另一方面，VueJS在Vue团队提供定期更新的情况下开始流行起来。

VueJS 与 Polymer

Polymer库由Google开发。它用于许多Google项目，例如Google I/O、Google Earth、Google Play Music等。它提供与VueJS类似的数据绑定和计算属性。

Polymer自定义元素定义包含纯JavaScript/CSS、元素属性、生命周期回调和JavaScript方法。相比之下，VueJS允许轻松使用JavaScript/html和CSS。

Polymer使用Web组件功能，并且需要针对不支持这些功能的浏览器进行polyfill。VueJS没有此类依赖项，并且在从IE9+的所有浏览器中都能正常工作。