——  文章看完的少走一个月弯路  ——

免费学习课程（http://www.bjsxt.com/）

一、为什么要用vue

      传统的网页形式是浏览器脚本语言js连接了各种各样的Html，css，但缺乏正规的组织形式，比如在页面元素非常多，结构很庞大的网页中，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，那么要对它们进行处理会十分的费劲。并且如果其中有几个结构之间存在藕断丝连的关系，那么会导致代码上出现更大的问题，比如juqery中使用的：

     一开始很好查找，但当页面结构发生变化，也就是说DOM的关联与嵌套层次要发生改变，那么之前的代码可能就会变成这样了：

这样产品迭代后，对dom节点的查找操作等行为会有很大的性能损耗。

    vue是一款友好的、多用途的且高性能的js框架，它可以帮你创建可维护性和可测试性更强的代码库。官网对vue的优点描述是这样的：

1、易用 

（1）、学习曲线平缓，api简洁，容易上手。学习过程较react来说比较容易，不那么痛苦

二、灵活 

      如果你已经有一个现成的服务端框架，你可以将vue作为其中的一部分嵌入，带来更加丰富的交互系统 ，或者你希望将更多业务逻辑放到前端来实现，那么vue的核心库及其生态系统也可以满足你的各式需求，vue允许你将网页分割成可复用的组件，每个组件都可以包含自身的html,css,js文件，以用来渲染网页中相应的地方。

三、高效 

• 虚拟dom： 其数据全部在内存中，只有js引擎参与其中

• 而真实dom会有浏览器渲染层在其中

     你的知道浏览器的虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）：

（1）、虚拟DOM不会进行排版与重绘操作

      虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗

（2）、真实DOM频繁排版与重绘的效率是相当低的

虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）

使用虚拟DOM的损耗计算：

直接使用真实DOM的损耗计算：

只能说 虚拟DOM 只是减少了一些情况下, 对真实DOM操作的次数.

虚拟DOM只是个 JavaScript object

     它会在 对比 后再选择更新哪些DOM, 而不会像有些时候, 全部删除再重建.

获取/修改 大量DOM元素的时候，就会先在 虚拟DOM 里取值 对比.

     虚拟dom是在内存中维护的dom树，是在实体dom之上的一层抽象。有了这层抽象，不管是查询操作还是修改操作，都是先操作内存中的虚拟dom，在这个过程中可以做很多优化，从而减少对实体dom的操作。

1. 查询一个text标签的值，可以直接从虚拟dom中查找得到，根本不需要查询实体dom。

      在一次操作中，要修改列表中的两条记录，要修改的元素会先把变更同步到虚拟dom上，然后根据最新的虚拟dom，一次性渲染出最终的实体dom，如果没有虚拟dom，两条记录的修改至少要对应两次对实体dom的操作，显然操作实体dom越频繁，网页速度越慢。

对于vue.js的Virtual DOM，目前业界有着褒贬不一的评价。

      有人认为Vue.js作为一个轻量级框架，引入Virtual DOM会加大Vue.js本身的代码尺寸，也会消耗更多CPU（手机上会更耗电）（注意：消耗更多的CPU并不意味着会更卡，因为JavaScript计算是后台计算，他的计算量还不至于让DOM操作变得卡顿），并且在操作单个DOM元素的时候，反而多了一道计算工序，会更慢。

      但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素，肯定操作的DOM量级普遍较大，平均一下还是比较划算的。

4.社区和第三方组件库丰富

• 社区
  论坛（https://forum.vuejs.org/） - 提问答疑的最好地方。
  Gitter（https://gitter.im/vuejs/vue） - 开发者聊天室。在这里你可以提问，不过最好在论坛提问，因为论坛有版块。
  Github（https://github.com/vuejs） - 报告问题，提交请求，为你所做的任何贡献表示深深感谢！

• vue组件库: 

  element-ui Mint UI

  muse-ui

二、vue是什么

1、Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

      这里渐进式框架也就是上边vue特点中的灵活一项，使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；

      比如说刚开始用数据绑定做一个表单，后来控制整个页面的dom，再后来用router控制路由做单页应用，组件配合，vuex与数据配合等等，使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用。

2、Vue 只关注视图层， 采用自底向上增量开发的设计。

（1）、视图层：

      那么 HTML 中的 DOM 其实就是视图，一个网页就是通过DOM的组合与嵌套，形成了最基本的视图结构，再通过CSS的修饰，在基本的视图结构上“化妆”让他们看起来更加美观。

     最后涉及到交互部分，就需要用到JavaScript来接受用户的交互请求，并且通过事件机制来响应用户的交互操作，并且在事件的处理函数中进行各种数据的修改，比如说修改某个DOM中的innerHTML或者innerText部分。

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

（2）、MVVM

     是Model-View-ViewModel 的缩写，由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；

     View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

      它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

      Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

（3）、MVC

控制器负责对模型中的数据进行更新，而视图向模型中请求数据；当有用户的行为触发操作时，会有控制器更新模型，并通知视图进行更新，在这时视图向模型请求新的数据

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

（1）、响应的数据绑定：

就是vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。

而这种绑定关系，在图上是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

2）、组合的视图组件：

      Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑）.

     组件自由组合形成功能完整的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行（组件化）

（3）、组件化优点：

              提高开发效率

              方便重复使用

              简化调试步骤

              提升整个项目的可维护性

              便于协同开发

最后：想要学习WEB前端服务器的小伙伴，关注我欧！

还有更多的有关于服务器的视频欢迎大家学习：

JAvA全套课程_尚学堂Java入门_Java零基础必备Java编程课程

https://www.bilibili.com/video/BV1ib411x7Bd

https://www.bilibili.com/video/BV1sc411h7pN

spring框架基础讲解尚学堂spring框架核心教程_spring框架+实战练

java架构师高端课做服务springdloud分布式高并发

上述视频由尚学堂提供：有需要视频课件与源码的小伙伴，在下方评论：666，稍后我发给你啦！

关注我+评论666，带你飞！！！

本文禁止转载或摘编