Vue学习（一）原理

一、Vue是什么？为什么要用Vue?

      定义：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。这个渐进式主要区别于传统的大型框架来说的，它本身没有象其它框架一样比如Angular或者React一样强主张的框架用法，而是你可以全家桶开发模式，或者部分功能使用模式，逐渐使用它的完整前端框架，它更多是当视图模板解析器使用。

     为什么要用？

         因为SPA(即单页技术）的流行，目前大家公认的Angular和React、Vue三大前端框架，由于传统的Ajax,JQuery前端页面与数据、逻辑混合在一起，非常难维护。所以提出来了MVVM的开发模式，即一种数据驱动的开发模式，把视图和数据分离，视图和数据之间的双向自动交换（或者中状态通信）通过一个中间件ViewModel来实现，即视图里的元素变了（即状态）自动更新到数据中，数据变化了同样自动更新反应到视图元素上，这就是双向绑定的实现：

      M:Model（数据）

      V:view(页面DOM)

     VM:ViewModel(监控者）

二、Vue的核心功能

     Vue有两个最核心功能：

     （1）数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图，一个字：爽。再也不用你去操心DOM的更新了，这就是MVVM思想的实现。

     （2）视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

三、Vue的数据绑定原理

   什么是双向绑定？

        Vue框架很核心的功能就是双向的数据绑定。 双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。
这样以来，就彻底变革了之前Dom的开发方式，之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的 开发时代，远远抛弃了Dom开发主导的时代了。

     此图的原理解释：

         1.View(视图DOM）和Model(数据 Plain js对象）之间的通讯是通过中间件ViewModel(即View)来完成的，即视图的改变和数据的改变，自动由ViewModel来监控，同时完成双方改变，从而自动刷新改变对方。

         2.ViewModel这个监控者中间件为了实现双向的数据绑定功能，具备了两个最核心的功能：（1）对视图Dom的监听  （2）把JS对象的属性绑定到视图的元素上面，从而实现Model即js对象的属性值发生变化时，自动更新到对应的视图(DOM)相关元素上，从而重新渲染视图，把Model绑定到视图DOM是由Vue提供一些指令标签来完成的。

        

===============================================

作者单位：北京速融科技有限公司

作者：钟招坤  qq:28582157

行业：担保软件研发

整理日期：2019.2.23

================================================