什么是Vue（问题导向）

源: https://blog.csdn.net/liang377122210/article/details/71545459

这里假设你仅仅只掌握了HTML+CSS+JavaScript，如果你对JQuery这个前端库，以及各种后端模版语言比如说PHP，JSP还有所了解并且使用过的话那就太好了。

1什么是Vue

官网

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

这是官网的介绍，是不是觉得非常的抽象非常的官方？看完之后可能还是有很多人不是很懂
这个框架到底是用来做什么的，
什么是“渐进式框架”？
什么是“自底向上增量开发”？
什么是“视图层”？
什么是“单文件组件”？
什么是“复杂的单页应用？”
第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥？
还有最后一段话，“Vue.js 与其它库/框架的区别”究竟是什么？

不要担心，如果你慢慢看完这里面的所有问答，一定会对前面那些可能你从未听说过的专业术语有一种恍然大悟的感觉。

Vue.js到底是什么？

Vue.js就是一个用于搭建类似于百度，网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。

假如有一个需求：
我要开发一个网页，用来展示用户的最新动态。我想我应该通过后端接口获取数据，然后在浏览器展示数据，用户可以对数据进行操作然后把修改好的数据传给后台。如果服务器上的数据变化了，我还需要更新。

我也可以用JQuery写啊，为什么要用Vue.js呢？

讲到JQuery，就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发，那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。

现在我们把一个网页应用抽象一下，那么HTML中的DOM其实就是视图，一个网页就是通过DOM的组合与嵌套，形成了最基本的视图结构，再通过CSS的修饰，在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分，就需要用到JavaScript来接受用户的交互请求，并且通过事件机制来响应用户的交互操作，并且在事件的处理函数中进行各种数据的修改，比如说修改某个DOM中的innerHTML或者innerText部分。

我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次，这个层次就叫做视图层。

Vue 的核心库只关注视图层

我们为什么要把视图层抽取出来并且单独去关注它呢？

因为在页面元素非常多，结构很庞大的网页中，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，那么要对它们进行处理会十分的费劲，并且如果其中有几个结构之间存在藕断丝连的关系，那么会导致代码上出现更大的问题，这什么问题呢？

你是否还记得你当初写JQuery的时候，有写过(’#xxx’).parent().parent().parent()这种代码呢？当你第一次写的时候，你觉得页面元素不多，不就是找这个元素的爸爸的爸爸的爸爸吗，我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理突然对你做的网页提出修改要求，这个修改要求将会影响页面的结构，也就是DOM的关联与嵌套层次要发生改变，那么(‘#xxx’).parent().parent().parent()可能就会变成$(‘#xxx’).parent().parent().parent().parent().parent()了。

这还不算什么，等以后产品迭代越来越快，修改越来越多，而且页面中类似的关联和嵌套DOM元素不止一个，那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的，可能到时候打开这个页面，会变得越来越卡，而你却无从下手。

当你在编写项目的时候遇到了这种问题，你一定会抱怨，为什么世上会有HTML这种像盗梦空间一样的需要无数div嵌套才能做出页面的语言，为什么当初学JQuery看中的是它简洁的DOM操作，现在却一点也不觉得它有多简洁，难道我学的是假的JQuery？为什么写个代码这么难，你想砸电脑，你想一键盘拍在产品狗的脑袋上，责怪他天天改需求才让你原本花清香茶清味的代码变得如此又臭又长。

这个时候如果你学过Vue.js，那么这些抱怨将不复存在。

Vue.js为什么能让基于网页的前端应用程序开发起来这么方便？

因为Vue.js有声明式，响应式的数据绑定，与组件化的开发，并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

vue优点
Vue的特有的响应机制：可以自动刷新用户界面。这种方法节省了大量的时间和额外的代码行，以便开发人员可以集中精力来开发其他功能，从而提高效率。

模块化、灵活的开发环境：Vue的Web应用是使用组件构建的。因为Vue已经根据项目需要为开发人员提供了许多灵活性和适应性，而且Vue的单文件组件是松散耦合的，这可以提高代码重用性，进而缩短了开发时间。

高性能：对于移动应用，Vue相比Angular和React而言，它能更快地启动应用。鉴于53%的用户会放弃加载时间超过3秒的网站，而移动应用又是现在网站提升用户体验的第一选择，因此Vue的高性能就变成了选择JavaScript前端框架的一个重要考量。

单页应用程序（SPA）

顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多，而且页面中的内容需要根据用户的操作动态变化。

我在学习Vue.js的时候老是听到Webpack，这是啥？

Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML，CSS，JavaScript，并且通过link标签将CSS引入你的HTML文件，以及通过Script标签的src属性引入外部的JS脚本，那么你肯定会对这个工具感到陌生。不要紧，我们先来了解一下为什么要用Webpack，然后带着原因去学习就好了。

为什么要用Webpack

前面说了，做一个单页应用程序本身就相当复杂，而且在做的时候肯定会使用到很多素材和别的第三方库，我们该如何去管理这些东西呢？

还有前面讲到了Webpack是一个前端打包工具，前端代码为什么要打包呢？因为单页应用程序中用到很多素材，如果每一个素材都通过在HTML中以src属性或者link来引入，那么请求一个页面的时候，可能浏览器就要发起十多次请求，往往请求的这些资源都是一些脚本代码或者很小的图片，这些资源本身才几k，下载连1秒都不需要，但是由于HTTP是应用层协议，它的下层是TCP这个运输层协议，TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长，所以需要把这些小文件全部打包成一个文件，这样只要一次TCP握手和挥手的过程，就把多个资源给下载下来了，并且多个资源由于都是共享一个HTTP请求，所以head等部分也是共享的，相当于形成了规模效应，让网页展现更快，用户体验更好。

前面说到Webpack还有构建的功能，这就不得不提到了ECMAScript6这个新版本的JavaScript，但是现在国内外还有很多人用着老版本的浏览器，这些浏览器并不支持ECMAScript6，那么我们的前端项目如何在这种浏览器上运行呢？这就需要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript语言，这个转换器的名字叫做babel，如果你以后听到或者看到了这个单词，应该要知道它就是一个ECMAScript6 to 老版本JavaScript的转换器了。这也是Webpack的构建功能。当然对前端有更深入的同学还会知道Sass，Less，stylus之类的CSS预处理器，我们也可以通过在Loader中编写特定的规则来实现自动将这些CSS预处理语言转换成普通浏览器能识别的CSS代码。

开头的介绍提到了vue.js可以使用单文件组件开发项目，其实也是通过Webpack将单文件组件中的模版，样式以及JS转换到主页面中

当然Webpack不止这点功能，它还可以通过安装各种插件来扩展，比如说热加载技术，就是解放键盘的F5键。让我们修改代码，并且按Ctrl+S保存之后，浏览器页面自动刷新变化，不需要我们去手动刷新，还有一些插件可以自动添加注释，自动给CSS代码加上一些浏览器内核对CSS3兼容前缀，就像webkit-xxx之类的一样

NPM和Node.js又是什么？它们是什么关系？

npm 仓库是什么……
是一个公开的仓库，用于放置可依赖的模块。
它更像是一个数据库，每个人都能在上面发布代码，也能下载上面的代码。你可以在开发的时候将这些代码下载到本地来使用，必要的时候也能上传到 CDN。

在实际项目中往往需要加载好几个库才能获取并展示数据。
其实你可以用「模块管理器」把这些个库「打包」成一个文件。
npm: Nodejs下的包管理器。

首先讲讲node.js。我们知道通常情况下，JavaScript的运行环境都是浏览器，因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作，一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。如果我们想用JavaScript写出一些能够运行在操作系统上的，能够具有像PHP，JAVA之类的编程语言具有的功能的程序该怎么办呢？Node.js就解决了这个问题。Node.js是一个服务端的JavaScript运行环境，通过Node.js可以实现用JavaScript写独立程序。像我们之前提到的Webpack就是Node.js写的，所以作为一个前端开发，即使你不用Node.js写独立程序，也得配一个Node.js运行环境，毕竟很多前端工具都是使用它写的。

NPM是一个node.js的包管理器。我们在传统开发的时候，JQuery.js大多都是百度搜索，然后去官网下载，或者直接引入CDN资源，这种方法太过于麻烦。如果以后遇到其他的包，这个包的代码本身可能还调用了其他的包（也称这个包和其他的那几个包存在依赖关系），那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器，直接可以通过

npm install xxx包名称

的方式引入它，比如说

npm install vue

就自动在当前项目文件夹下导入了这个包，并且npm自动下载好了vue这个包依赖的其他包。

至于有的人在按照网上的npm教程配置的时候踩坑了，发现下载速度很慢或者完全下载不了，那是因为我国有着众所周知的原因，网上也有各种解决方法可以解决这个问题，大家多善用搜索引擎。

前面提到了Webpack可以安装各种插件来扩展功能，其实也是通过这种方式扩展。

如果你学过PHP的话，NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。

Vue-CLi又是啥？

它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录，配置好Webpack，以及各种依赖包的工具，它可以通过npm install vue-cli -g的方式安装，后面的-g表示全局安装的意思，意味着你可以打开命令行之后直接通过vue命令调用它。
vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

Vuex和Vue-route，它们又是什么？

Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

Vue-route是vue的一个前端路由器，这个路由器不是我们上网用的路由器，而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。

Vue页面切换为什么不用a链接，路由和a标签有什么区别

对比<a>，Link组件避免了不必要的重渲染
通过<a>标签实现页面跳转，页面体现为视觉上的页面闪烁，即消失-重现
通过<Link>组件实现页面跳转：视觉上无变化，只更新变化的部分从而减少DOM性能消耗
Vue的创新之处在于，它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"，Vue-router很好地继承了这一点

https://www.jianshu.com/p/3187eaa58f08

axios是什么？怎么使用？

有人问：我能用 Vue展示服务器传来的数据吗？
我想从服务器取点数据，以前用 jQuery 挺好的，从 CDN 引入 jQuery，我就能用 AJAX 获取数据了，现在不能这样做吗？
正如上文说的，jQuery的代码不好维护，并且还会影响性能
在vue里面怎么获取数据呢？
axios：是请求后台资源的模块；

我们在传统的前后端不分离的开发中，后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页应用程序属于前后端分离开发，那么这个单页应用程序中的数据就得通过ajax的方式获取，也要通过ajax的方式提交到后端。

在传统开发中我们都是通过xmlhttprequest手动操作，或者通过JQuery的ajax方法来进行数据提交获取。

vue.js本身没有封装ajax操作库，所以我们要通过Vue-resource和Axios来进行ajax操作，现在vue.js2.0已经将axios作为官方推荐的ajax库了。

怎么解决跨域的问题

因为vue-cli会建立一个服务器，那么本地去用axios请求，会造成跨域；解决方法是通过vue-cli生成的框架的结构目录下的config/index.js，去配置proxyTable配置项；

https://blog.csdn.net/hyt2018/article/details/86371063

在 2016 年学 JavaScript 是一种什么样的体验？ https://zhuanlan.zhihu.com/p/22782487

Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。