关于vue、关于html的一点点理解

由于换了一家公司，前端全部使用了vue这个框架，所以就在网上找了一些资料，去了解一些这个前端框架。最近看了几篇文章，写的挺好的，给大家分享一些其中的经典。

1、 什么是vue

官网介绍：vue是一套构建用户界面的渐进式框架。它与其他重量级框架不同的是，vue采用自下而上增量开发的设计。Vue的核心库只关注视图层，非常容易学习，非常容易与其他库或则已有项目整合。

       Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图层组件。

2、 什么是通俗的vue

官方的介绍一般都很官方，对于初次接触的人来说，很难理解。简单来说，vue就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。

3、 什么是单页应用SPA

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

4、 网页版的知乎用JQuery也可以写啊，为啥要用vue？

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

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

       我们把HTML中的DOM就可以与其他部分独立开来划分出一个层次，这个层次就叫做视图层！而vue的核心库只关注这个视图层！

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

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

       那么会出现什么问题那？

还记得在当初写JQuery的时候，有写过$(“#XXX”).parent().parent()这种代码。当项目如果发生变更的时候，尤其是产品经理突然对你的网页提出修改要求，而这个修改要求将会影响页面的结构，也就是DOM关联与嵌套层次要发生改变的时候，那么这个选择器使用起来就会很麻烦。

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

       这个时候，你定会抱怨，为什么世上会有HTML这种像盗梦空间一样需要无数个div嵌套才能做出的页面语言，为什么当初学JQuery看中的是它简介的DOM操作，现在看起来一点都不简洁？

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

6、 vue为什么能让给予网页的前端应用程序开发起来这么方便？

因为vue有声明式，响应式的数据绑定，与组件化的开发，并且还使用了Virtual DOM这个看起来很高大上的技术。