vue框架（为什么要是⽤Vue，好处是什么）
1、什么是Vue.js
Vue是⼀套⽤于构建⽤户界⾯的渐进式的JavaScript框架。
2、Vue.js的优点
体积⼩：压缩后只有33k；
更⾼的运⾏效率：基于虚拟DOM，⼀种可以预先通过JavaScript进⾏各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
双向数据绑定：让开发者不⽤再去操作DOM对象，把更多的精⼒投⼊到业务逻辑上；
⽣态丰富、学习成本低：市场上拥有⼤量成熟、稳定的基于vue.js的ui框架及组件，拿来即⽤实现快速开发；对初学者友好、⼊门容易、学习资料多；
3、为什么要使⽤Vue.js
随着前端技术的不断发展，前端开发能够处理的业务越来越多，⽹页也变得越来越强⼤和动态化，这些进步都离不开JavaScript。在⽬前的开发中，已经把很多服务端的代码放到了浏览器中来执⾏，这就产⽣了成千上万⾏的JavaScript代码，他们连接着各式各样的HTML和CSS ⽂件，但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使⽤JavaScript框架的原因，⽬前⽐较流⾏的前端框架有Angular、Reac、Vue等。
Vue是⼀款友好的、多⽤途且⾼性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应⽤，你可以将Vue作为该应⽤的⼀部分嵌⼊其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么Vue的核⼼库及其⽣态系统也可以满⾜你的各式需求。
和其他框架⼀样，Vue允许你将⼀个⽹页分割成可复⽤的组件，每个组件都包含属于⾃⼰的HTML、CSS、JavaScript，以⽤来渲染⽹页中相应的地⽅。如果我们构建了⼀个⼤型的应⽤，可能需要将东西分割成为各⾃的组件和⽂件，使⽤Vue的命令⾏⼯具，使快速初始化⼀个真实的⼯程变得⾮常简单。
vue init webpack my-project
我们甚⾄可以使⽤Vue的单⽂件组件，它包含了各⾃的HTML、JavaScript以及带作⽤域的CSS或SCS
S。
4、MVC、MVP、MVVM 设计模式
MVC（Model-View-Controller）是最常见的软件架构之⼀，在软件开发领域有着⼴泛的应⽤，MVC本⾝是⽐较好理解的，但是要讲清楚由它衍⽣出来的MVP和MVVM就不太容易了。
4.1、MVC
MVC的意思是，可以将软件分为三个部分：
视图（View）：⽤户界⾯
控制器（Controller）：业务逻辑
模型（Model）：数据保存
各部分之间的通信⽅式为：
View传送指令到Controller
Controller完成业务逻辑后，要求Model改变状态
Model将新的数据发送到View，⽤户得到反馈
并且所有的通信都是单向的，如下图所⽰：
MVC 模式的执⾏流程是有两种⽅式：
（1）通过View接受指令，传递给Controller
（2）直接通过Controller接受指令
实际项⽬中往往采⽤更加灵活的⽅式：
（1）⽤户可以向View发送指令（DOM事件），再由View直接要求Model改变状态；
（2）⽤户也可以直接向Controller发送指令（改变URL触发hashChange事件），再由Controller发送给view ;
（3）Controller⾮常薄，只起到路由的作⽤，⽽View⾮常厚，业务逻辑都部署在View，所以有些框架⾥就直接取消了Controller，只保留⼀个Router（路由器）。
如图所⽰：
4.2、MVP
MVP（Model-View-Presenter），是从经典的MVC演变⽽来的。Mode提供数据，View负责显⽰，Presenter负责逻辑的处理。
MVP和MVC有着⼀个重⼤的区别：
在MVP中View与Model不发⽣联系，它们之间的通信是通过Presenter来进⾏的，所有的交互都发⽣在Presenter（即MVC中的
Controller）内部；⽽在MVC中View会直接从Model中读取数据⽽不是通过Controller。
MVP中各部分之间的通信是双向的，⽽在MVC中各部分之间的通信是单向的。
在MVP中，View⾮常薄，不部署任何业务逻辑，称为“被动视图”（Passive View），即没有任何主动性，⽽Presenter⾮常厚，所有逻辑都部署在那⾥。
如图所⽰：
4.3、MVVM
MVVM（Model-View-ViewModel），它本质上是MVC的改进版，是针对MVC中的View进⾏了更细致的分⼯。ViewModel将视图UI和业务逻辑分开，它可以取出Model的数据，同时帮助处理View中由于需要展⽰内容⽽设计到的业务逻辑。jquery是什么有什么作用
MVVM模式与MVP模式类似，唯⼀的区别是，它采⽤了数据双向绑定（data-binding），即View的变动⾃动反应在ViewModel，反之亦然。
5、数据驱动（双向数据绑定）的原理
什么是数据驱动
数据驱动是Vue.js最⼤的特点。在vue中，所谓的数据驱动就是当数据发⽣变化时，⽤户界⾯发⽣相应的变化，开发者不需要⼿动的去修改DOM。
⽐如，我们点击⼀个button，需要元素的⽂本做⼀个 “是/否” 的切换操作，在传统的jQuery中，对于页⾯修改的流程通常是：对button绑定事件，然后获取⽂案对应元素的dom对象，最后根据切换来修改dom对象的⽂本值。
Vue实现数据驱动
vue实现数据双向绑定主要采⽤数据劫持，配合发布者-订阅者模式的⽅式，通过Object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发相应监听回调。
当⼀个普通 JavaScript 对象传给 Vue 实例来作为它的 data 选项时，vue 将遍历它的属性，⽤ Object.defineProperty 将它们转为
getter/setter 。⽤户看不到 getter/setter ，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化。
vue的数据双向绑定将MVVM作为数据绑定的⼊⼝，整合Observer、Compile和Watcher三者，通过Observer来监听⾃⼰的Model的数据变化，通过Compile来解析编译模板指令（vue中⽤来解析{{}}模板语法），最终利⽤Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 —> 视图更新；视图交互变化（input）—> 数据model变更双向绑定效果。
getter和setter的理解
当打印出vue实例下的data对象⾥的属性，它的每个属性都有两个对应的get和set⽅法。顾名思义，get为取值⽅法，set为赋值⽅法。正常情况下，取值和赋值是⽤ obj.prop 的⽅式，但是这样做有⼀个问题，我们如何知道对象的值改变了？
我们可以把get和set理解为function，当我们调⽤对象的属性时，会进⼊到 get.属性(){...} 中，先判断对象是否有这个属性，如果没有，那么就添加⼀个name属性，并给它赋值；如果有name属性，那么就返回name属性。可以把get看成⼀个取值的函数，函数的返回值就是它拿到的值。
当给实例赋值时，会进⼊ set.属性(val){...} 中，形参val就是赋给属性的值，在这个函数⾥做了很多事情，⽐如双向绑定等等。因为这个值每次都要经过set，其他⽅式⽆法对该值做修改。在ES5中，对象原型有两个属性，_defineGetter_和_defineSetter_，专门⽤来给对象绑定get和set。
6、虚拟DOM
6.1 什么是虚拟DOM
在Vue.js 2.0版本中引⼊了 Virtual DOM 的概念，Virtual DOM 其实就是⼀个以JavaScript对象（VNode节点）作为基础来模拟DOM结构的树形结构，这个树形结构包含了整个DOM结构的信息。简单来说，可以把Virtual DOM理解为⼀个简单的JS对象，并且最少包含标签名（tag）、属性（attrs）和⼦元素对象（children）三个属性。不同的框架对这三个属性的命名会有所差别。
6.2 虚拟DOM的作⽤
虚拟DOM的最终⽬标是将虚拟节点渲染到视图上。但是如果直接使⽤虚拟节点覆盖旧节点的话，会有
很多不必要的DOM操作。例如，⼀个ul标签下有很多个li标签，其中只有⼀个li标签有变化，这种情况下如果使⽤新的ul去替代旧的ul，会因为这些不必要的DOM操作⽽造成性能上的浪费。
为了避免不必要的DOM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上⼀次渲染视图所使⽤的旧虚拟节点做对⽐，出真正需要更新的节点来进⾏DOM操作，从⽽避免操作其他不需要改动的DOM元素。
其实，虚拟DOM在Vue.js中主要做了两件事情：
提供与真实DOM节点所对应的虚拟节点VNode
将虚拟节点VNode和旧虚拟节点oldVNode进⾏对⽐，然后更新视图
6.3 为什么要使⽤虚拟DOM
具备跨平台优势，由于Virtual DOM 是以JavaScript对象为基础⽽不依赖真实平台环境，所以使它具有了跨平台的能⼒，⽐如说浏览器平台、Weex、Node等。
操作DOM慢，JS运⾏效率⾼，可以将DOM对⽐操作放在JS层，提⾼效率。因为DOM操作的执⾏速度远不如JavaScript运算速度快，因此，把⼤量的DOM操作搬运到JavaScript中，运⽤patching算法来计
算出真正需要更新的节点，最⼤限度地减少DOM操作，从⽽显著提⾼性能。Vritual DOM本质上就是在JS和DOM之间做了⼀个缓存，JS只操作Virtual DOM，最后把变更写⼊到真实DOM。
提⾼渲染性能，Virtual DOM的优势不在于单次的操作，⽽是在⼤量、频繁的数据更新下，能够对视图进⾏合理、⾼效的更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。