很多用过VUE的程序员对VUE的评价是“Vue.js结合了angular.js和react.js的优点，又去掉了它们的缺点”。那么，他真的配得上这么高的评价吗？Vue.js的创造者是杰出的华人——尤玉玺（EvanYou）。在开发工具方面，中国人创造的很少，这可能会给它加分不少。但是，感情终究不能代替实际的需求，而VUE的兴起就是它确实是一个非常好的框架。他不像许多其他编程语言那样晦涩难懂。所见即所得是它的基本特征。由于这个特点，很多初学者也会把它作为一种入门语言。我们知道JohnResig发布了第一个版本的jQuery，从此前端开发进入了jQuery时代；站在巨人的肩膀上，我们才能看得更远，一系列基于js的框架如雨后春笋般涌现。他们出来了，但大多数都是短暂的。除了Angular、React、Vue等主流之外，其他的都在艰难求生。为什么要有框架万物皆因需求而存在，其根本目的在于解决一些实际问题。框架也是如此，正如vue的作者所说：框架的存在是为了帮助我们应对复杂性。但是框架本身还是有复杂性的，就像我们用扳手拧螺丝一样，扳手就是框架。它相当于一个工具，工具本身是有学习成本的，但是它的学习成本要低很多。我们用这个工具来解决一个没有扳手会很复杂的问题，这和我们在工作中遇到的使用前端框架解决一个复杂项目的过程是一样的。因此，在我们使用的框架（tool-wrench）和我们要解决的问题（complexity-screw）之间做出选择是很自然的，我们倾向于使用简单的工具。解决一个复杂的问题就是框架的意义。这样，我们希望框架越来越简单，它能解决的问题能越来越复杂。幸运的是，我们目前正朝着我们希望的方向前进。目前主流的框架目前讨论比较多的前端框架主要有3种。我们来看看开发者的观点：Angular、React、Vue。通过他们在GitHub上的Star历史和NPM的下载趋势图对比一下。Angular、React和Vue的GitHubStar历史：npm下载趋势图：可以看出，在GitHub上，Vue的数据涨幅最快，在2018年6月28日已经超过React，成为最流行的前端框架。在npm中，React的数据遥遥领先，得益于React强大的社区力量。我们不能否认，React社区作为目前最活跃的前端社区，提供了很多优秀的想法和理念，为React提供了强大的生态支持，同时也让我们在使用时可以做出更多的选择。选择周围的框架。当然，这三个框架都很好，我们不讨论它们的优缺点，我们的选择只是基于我们的权衡：我们希望工具足够简单，但它能解决的问题也足够复杂。够了，不是吗？Angular期望做很多事情，比如它会包含自己的路由，这使得我们在决定使用Angular时不得不接受所有这些，这使得学习成本更高，但同时选择它会少一点，但有时候选择少一点也不是坏事，它能让我们更加专注。React和Vue一样，只关注界面，其他的都会有各种配套的工具，比如路由，或者状态管理工具，所以你在使用的时候可能需要做更多的选择，而这种方法使得学习曲线自己（React，Vue）比较扁平。从上面的分析可以看出，Angular提供了一个复杂的工具来解决一组复杂的问题。另一方面，React和Vue专注于解决一个特定的问题，而将其他问题交给它们的生态系统，这也会让我们花更多的时间来选择合适的外围工具。因此，这些框架各有优缺点，没有绝对的好坏之分。我们选择什么样的工具取决于我们面临什么样的问题。没有人想用大炮打蚊子，也没有人想用苍蝇拍打大象。我们喜欢恰到好处，追求事半功倍。如果您的想法相同，那么至少我们的基本概念是相同的。说了这么多Vue的特性，让我们回到今天的重点，看看以VUE为代表的渐进式框架到底有什么魅力。主要从以下几个方面：MVVM框架单页应用轻量级易学的ViewModel，像下面这样：那么这个MVVM框架应该怎么理解呢？它的第一个View相当于页面中的DOM，最后一个Model相当于数据源，如下图：其中a标签就是DOM，data对象就是数据源。两者之间永远不会有直接的通信关系，它们的所有连接都是通过ViewModel进行的，也就是监视器。监视器会负责检测数据的变化，然后将数据实时显示在页面上。比如你把text的内容改成“HelloVue”，那么a标签显示的内容就会自动变成“HelloVue”。这样就不需要手动操作DOM，所有对DOM的操作都由monitor来完成。如果你之前写过复杂的DOM操作（比如**.parent().parent().parent()...），你会发现这个方法带来的便利。Vue就是利用了这种MVVM框架形式，通过声明式渲染和响应式数据绑定，帮助我们完全避免DOM操作。2、单页应用单页应用（SPA）泛指：一个页面就是一个应用（或子应用）。随着技术的发展，现在的前端网页不仅仅局限于在浏览器上展示，在手机APP和微信上展示的机会也越来越多公众号。那么如果我们把传统的多页申请表放到手机上会是什么样子呢？当进行页面跳转打开新页面时，会变成这样：等待的花都谢了。有没有？而如果使用单页表单开发，就不会出现这样的情况。因为我们整个应用只有一个页面，当我们的单页加载完成后，就不会再有对该页面的网络请求了。生态中有Vue和Vue-Router，开发复杂的单页应用非常方便。3、轻量易学我们知道，网页中引入的JS越大，加载的时间就越长，反之，体积越小，越省时。所以我们更倾向于使用更小的JS文件，这也是为什么在生产版本中引入.minJS的原因。以下是我的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样式、数据等，可以通过
