为何那么多前端都选择用 Vue.js框架？

程序人生

咱们选择了这个 IT 行业，天然但愿可以在这个行业走得更远。我相信没有任何一我的会甘于平庸，你们都但愿可以在本身所处的行业以及所处的领域中有所建树，但愿能够实现本身的价值，以获取社会的承认。而若是要实现这个目标的话，咱们将要投入更多的时间和精力，才能博得更多的机会。在成长的过程当中，不可避免的会踩一些坑、走一些弯路，那么有没有办法能够避免少踩一些坑、少走一些弯路呢？万幸的是，答案是有的。

站在巨人的肩膀上，咱们能够看得更远，约翰 · 雷西格发布了 jQuery 的第一个版本，今后让咱们进入了 jQuery 时代；尤雨溪创造了 Vue，使咱们正式迈入 Vue 的时代。这些领军者，让咱们可以看得更远，让咱们的工做和生活变得更加简单。因此这应该是全部前端开发者选用Vue的根本缘由！

框架为何会存在

这个世界上任何事物的存在，必然是解决了世界上的一些问题。一样的道理，框架为何会存在呢？框架的存在也必然是解决了某一个或某一类的问题，这里引入一下 Vue 的做者尤雨溪说过的话：框架的存在是为了帮助咱们应对复杂度。框架做为一个工具用来帮助咱们应对一类复杂的问题，我想这就是框架的定义了。

固然框架自己同样存在着复杂度，就好像咱们使用扳手去拧螺丝时，扳手就是框架，它是一个工具，这个工具自己同样有学习成本，只不过它的学习成本比较低，咱们使用这个工具来去解决拧螺丝这样一个若是没有扳手会变得至关复杂的问题，这和使用前端框架去解决在工做中遇到的一个复杂项目的时候所经历的过程是同样的。

因此，很天然的就会在咱们使用的框架（工具——扳手）和想要去解决的问题（复杂度——拧螺丝）之间进行抉择，咱们会更趋向于使用一个简单的工具来去解决一个复杂的问题，这就是框架存在的意义了。

因此咱们本能的但愿框架变得愈来愈简单，而它可以解决的问题愈来愈复杂。万幸的是：这个时代正在按照咱们的但愿来发展。

主流框架

目前讨论比较多的前端框架主要有三个：

Angular React Vue

经过它们在 GitHub 的 Star 历史和 NPM 的下载趋势图来看一下。

Angular、React 和 Vue 的 GitHub Star 历史：

npm 的下载趋势图：

能够看到在 GitHub 上面，Vue 的数据上升最快，而且在 2018 年 6 月 28 日已经超过了 React，成为了最受欢迎的前端框架。而在 npm 中，React 的数据遥遥领先，这得益于 React 强大的社区力量，咱们没法否定，React 社区做为当前最活跃的前端社区，提供出了特别多优秀的想法和理念，它们为 React 提供了强大的生态支持，同时也让咱们在选择周边框架的时候须要进行更多的选择。

固然这三个框架都很是的优秀，咱们不去讨论它们的优劣，咱们的选择都只是基于咱们的取舍：咱们但愿工具足够简单，而它能够解决的问题却要足够复杂。这就够了，不是吗？

Angular：Angular 指望作的事情很是多，好比说它会包含着它本身的路由，这让咱们决定去使用 Angular 的时候，就必需要接受它的所有，这就使得学习成本变得更高，但同时选择变得会更少，不过有时候选择少了并不是是一件坏事，它可让咱们更加专一。

React 与 Vue：React 与 Vue 同样都是专一只作界面，而其余的全部一切都会有各类配套的工具，好比说路由，或者状态管理工具，因此说使用它们的话你可能须要作更多的选择，而这种方式则使得它们自己（React、Vue）的学习曲线相对平缓。

从上面的分析能够看出，Angular 提供了一个复杂的工具，用于解决一整套复杂的问题。而 React 与 Vue 则专一于解决一个特定的问题，而把其余的问题交给了它们的生态圈来处理，这样作的同时也会让咱们花更多的时间来选择合适的周边工具。

因此说这些框架各有优劣，并无绝对的谁好谁坏之分，咱们选择什么样的工具，取决于咱们面对了什么样的问题。没有人会喜欢用大炮去打蚊子，也没有人会想到用苍蝇拍来打大象。咱们喜欢刚恰好，追求事半功倍，若是你也是这么想的，那么至少咱们的底层观念是一致的。

Vue 的特色

通过了那么多的铺垫，总算到了本次课程内容的重点：Vue，它到底有什么魅力？为何值得咱们花费时间去学习？先来看一下 Vue 到底拥有什么样的特色。

咱们会从如下8个方面来对 Vue 进行分析：

• MVVM 框架
• 单页面应用程序
• 轻量化与易学习
• 渐进式与兼容性
• 视图组件化
• 虚拟 DOM（Virtual DOM）
• 社区支持
• 将来的 Vue 走向

（1）MVVM 框架

所谓 MVVM 框架就是：Model-View-ViewModel，就像下面这样：

那么这个 MVVM 框架，应该怎么去理解呢？它的第一个 View，至关于页面中的 DOM，最后一个 Model 至关于数据源，就像下面这个样子：

其中，a 标签就是 DOM，data 对象就是数据源，这二者之间永远不会直接通讯，它们全部的联系都是经过 ViewModel，也就是监控者来进行的。监控者会去负责检测数据的变化，而后把数据实时展现在页面中。例如，把 text 的内容更改成 “Hello Vue” 的话，那么 a 标签中展现的内容，也会自动变为 “Hello Vue”。这样就不须要手动的操做 DOM，全部对 DOM 操做都会经过监控者来完成。若是之前写过复杂的 DOM 操做的话（如 **.parent().parent().parent()...），就会发现这种方式带来的便利。

Vue 正是使用了这种 MVVM 的框架形式，而且经过声明式渲染和响应式数据绑定的方式来帮助咱们彻底避免了对 DOM 的操做。

（2）单页面应用程序

单页面应用程序（SPA），通常指为：一个页面就是一个应用（或子应用）。随着技术的发展，如今的前端网页早已不仅局限于在浏览器上展现了，手机 App 上、微信公众号上都有了愈来愈多的展现机会。

那么若是把传统的多页面应用形式放入到咱们的手机上面会是什么样子呢？当进行页面跳转打开一个新的页面的时候，它会变成这样：

等的花儿都谢了 有没有？

而若是使用单页面的形式来开发的话，就不会出现这样一种状况。由于咱们的整个应用就只有一个页面，当咱们的这一个单页被加载进来以后，就不会在进行关于页面的网络请求。Vue 配合生态圈中的 Vue-Router 就能够很是方便的开发复杂的单页应用。

（3）轻量化与易学习

咱们知道网页中引入的 JS 体积越大，那么加载所须要耗费的时间就越长，反之体积越小，则越节省时间。因此咱们会更倾向于使用体积更小的 JS 文件，这也是为何在生产版本会引入 .min 的 JS 的缘由。下面是我从 Vue 官网的截图：

目前 Vue 的最新稳定版本为 2.5.16，从截图中能够看到 Vue 的生产版本只有 30.90KB 的大小，几乎不会对咱们的网页加载速度产生影响。同时由于 Vue 只专一于视图层，单独的 Vue 就像一个库同样，因此使咱们的学习成本变得很是低。

（4）渐进式与兼容性

渐进式框架就是：我只作份内的事情，而且不会对你要求太多。

Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。

这是 Vue 官网上面的一句话，正如在上面所说的，Vue 只作界面，而把其余的一切都交给了它的周边生态来作处理，这就要求 Vue 必需要对其余的框架拥有最大程度的兼容性。

例如，一开始只想作一个静态站，那么能够只引入 Vue 来去构建界面，过了一段时间，你想在网站上加入访问网络的功能，那么你能够再引入 axios（Vue 官方推荐）或者其余的（哪怕是 jQuery）网络请求框架，然后来随着你的网站越作越大，你想要把你的网站变成一个大型的 Web 应用的时候，能够引入一些其余你须要的 JS 文件，如 Loadsh.js、Velocity.js 等。

（5）视图组件化

所谓视图组件化就是把咱们的网页拆分为一个个的组件，就像下面这样：

Vue 容许经过组件来去拼装一个页面，每一个组件都是一个可复用的 Vue 实例，组件里面能够包含本身的数据，视图和代码逻辑。好比说：

CSDN 的这个我的资料模块，你们都已经不陌生了吧，当咱们的 Web 应用中有多个页面都使用到这个我的资料模块的时候，就能够把它封装成一个组件，这个组件拥有单独的代码逻辑、CSS 样式、数据等，在任何一个咱们须要使用到它的地方，就能够经过

<component-name></component-name>

Vue.component('component-name', {
    ...
});

这种方式来直接引入了。

（6）Virtual DOM

Virtual DOM 也就是虚拟 DOM，你们知道浏览器去处理 DOM 操做时，是存在性能问题的，这也是咱们在使用 jQuery 或者原生 JavaScript 来去频繁操做 DOM 进行数据渲染的时候，咱们的页面常常出现卡顿的缘由。

而虚拟 DOM 则是预先经过 JavaScript 的各类运算，把最终须要生成的 DOM 计算出来，而且进行优化，在计算完成以后才会将计算出的 DOM 放到咱们的 DOM 树中。因为这种操做的方式并无进行真实的 DOM 操做，因此才会叫它虚拟 DOM。

咱们在前面说过：

Vue 是经过 声明式渲染和 响应式数据绑定的方式来帮助咱们彻底避免了对 DOM 的操做。

Vue 之因此能够彻底避免对 DOM 的操做，就是由于 Vue 采用了虚拟 DOM 的方式，不但避免了咱们对 DOM 的复杂操做，而且大大的加快了咱们应用的运行速度。

（7）来自社区的支持

虽然在全球中 Vue 的社区并无 React 社区那么的繁华，但得益于 Vue 的本土化身份（Vue 的做者为国人尤雨溪），再加上 Vue 自己的强大，因此涌现出了特别多的国内社区，如 https://www.vue-js.com/、https://vuejs.com.cn/ 等。这种状况在其余的框架身上是没有出现过的，这使得咱们在学习或者使用 Vue 的时候，能够得到更多的帮助。

（8）将来 Vue 的走向

Vue 是由国人尤雨溪在 Google 工做的时候，为了方便本身的工做而开发出来的一个库，而在 Vue 被使用的过程当中，忽然发现愈来愈多的人喜欢上了它。因此尤雨溪就进入了一个边工做、边维护的状态，在这种状况下 Vue 依然迅速的发展。

而如今尤雨溪已经正式辞去了 Google 的工做，开始专职维护 Vue，同时加入进来的还有几十位优秀的开发者，他们致力于把 Vue 打造为最受欢迎的前端框架。事实证实 Vue 确实在往愈来愈好的方向发展了（从 Angular、React、Vue 的对比图中能够看出 Vue 的势头）。因此我以为彻底不须要担忧将来 Vue 的发展，至少在没有新的颠覆性创新出来以前，Vue 都会越作越好。