VueJS - 概述

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

VueJS 的安装非常简单易上手。任何开发者都能轻松理解并在短时间内构建交互式 Web 界面。VueJS 由前 Google 员工 Evan You 创建。VueJS 的第一个版本于 2014 年 2 月发布。最近，它在 GitHub 上获得了 64,828 个星标，非常受欢迎。

特性

以下是 VueJS 提供的特性。

Virtual DOM

VueJS 使用 virtual DOM，这也是 React、Ember 等其他框架所使用的。更改不会直接应用到 DOM，而是创建一个 DOM 的副本，以 JavaScript 数据结构的形式存在。每当需要进行更改时，都会对 JavaScript 数据结构进行修改，并将其与原始数据结构进行比较。然后将最终更改更新到真实的 DOM，用户会看到这些变化。这在优化方面很有优势，成本更低，更改速度更快。

Data Binding

Data binding 特性有助于通过 VueJS 提供的绑定指令 v-bind 来操纵或赋值给 HTML 属性、更改样式、分配 class。

Components

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

Event Handling

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

Animation/Transition

VueJS 提供了多种方式，在 HTML 元素添加到 DOM、更新或移除时应用过渡效果。VueJS 内置了一个 transition component，需要将元素包裹在其中以实现过渡效果。我们可以轻松添加第三方动画库，并为界面增加更多交互性。

Computed Properties

这是 VueJS 的重要特性之一。它有助于监听 UI 元素的更改并执行必要的计算，无需额外编码。

Templates

VueJS 提供了基于 HTML 的 templates，将 DOM 与 Vue 实例数据绑定。Vue 将 templates 编译成 virtual DOM Render functions。我们可以使用 render functions 的 template，为此需要将 template 替换为 render function。

Directives

VueJS 内置了诸如 v-if、v-else、v-show、v-on、v-bind 和 v-model 等 directives，用于在前台执行各种操作。

Watchers

Watchers 应用于会发生变化的数据，例如表单输入元素。在此，我们无需添加任何额外事件。Watcher 会处理任何数据变化，使代码更简洁、更快速。

Routing

页面之间的导航通过 vue-router 实现。

Lightweight

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

Vue-CLI

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

与其他框架的比较

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

VueJS 与 React 的比较

Virtual DOM

Virtual DOM 是 DOM 树的虚拟表示。通过 virtual DOM，会创建一个与真实 DOM 相同的 JavaScript 对象。每当需要对 DOM 进行更改时，都会创建一个新的 JavaScript 对象并进行更改。随后，比较这两个 JavaScript 对象，并在真实 DOM 中更新最终更改。

VueJS 和 React 都使用 virtual DOM，这使得它们更快。

Template 与 JSX 的比较

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

React 使用 jsx 方法。对于 ReactJS 来说，一切都是 JavaScript。HTML 和 CSS 都是 JavaScript 的一部分。

安装工具

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

流行度

React 比 VueJS 更流行。React 的工作机会多于 VueJS。React 背后有 Facebook 这个大品牌，这使其更受欢迎。由于 React 使用 JavaScript 的核心概念，它采用了 JavaScript 的最佳实践。使用 React 工作的人肯定会非常精通所有 JavaScript 概念。

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

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

VueJS 与 Angular 的比较

相似性

VueJS 与 Angular 有很多相似之处。诸如 v-if、v-for 等 directives 几乎类似于 Angular 的 ngIf、ngFor。两者都有命令行界面用于项目安装和构建。VueJS 使用 Vue-cli，Angular 使用 angular-cli。两者都提供 two-way data binding、server side rendering 等功能。

复杂性

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

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

性能

性能的决定权在于用户。VueJS 的文件大小比 Angular 轻得多。框架性能比较见以下链接 https://krausest.github.io/js-framework-benchmark/

流行度

目前，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。然而，我们可以在 jsfiddle 或 codepen 中使用 cdn library 随时开始 VueJS 编码。我们可以使用标准 JavaScript，这非常容易上手。

VueJS 与 Ember 的比较

相似性

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

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

两者都具有 router、template 和 components 等功能，使它们作为 UI framework 非常丰富。

性能

相比 Ember，VueJS 具有更好的性能。Ember 添加了 glimmer rendering engine，旨在改善 re-render 性能，这与 VueJS 和 React 使用 virtual DOM 的概念类似。然而，与 Ember 相比，VueJS 的性能更好。

VueJS v/s Knockout

Knockout 提供了良好的浏览器支持。它支持较低版本的 IE，而 VueJS 不支持 IE8 及以下版本。Knockout 的开发随着时间推移而放缓。最近它的人气并不高。

另一方面，VueJS 开始受到欢迎，Vue 团队提供了定期的更新。

VueJS v/s Polymer

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

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

Polymer 使用 web component 特性，并在不支持这些特性的浏览器中需要 polyfills。VueJS 没有此类依赖，并在 IE9+ 的所有浏览器中正常工作。