Vue双向数据绑定

一、Vue.js基本概念

Vue.js 是一套构建用户界面的框架，只关注视图层，易于与第三方库或已有项目整合，有丰富的配套三方类库，可以整合起来做大型项目的开发。

二、Vue.js特点

• Vue.js 基于MVVM架构
• 编码简洁，体积小，运行效率高，适合移动/PC 端开发
• 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目
• 参考了React的组件化和虚拟DOM技术，借鉴了angular的模板和数据绑定技术

三、MVC、MVP、MVVM

• MVC，MVP和MVVM都是常见的软件架构设计模式，通过分离关注点来改进代码的组织方式。
• 不同于设计模式（只是为了解决一类问题而总结出的抽象方法），一种架构模式往往使用了多种设计模式。
• 不同部分是C(Controller)、P(Presenter)、VM(View-Model)。
• 相同的部分则是MV(Model-View)。
  Model：Model层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法。
  View：View作为视图层，主要负责数据的展示。

1. MVC

通过Model&View完成了数据从模型层到视图层的逻辑，但对于一个应用程序，这远远是不够的，我们还需要响应用户的操作、同步更新View和Model。

用户对View的操作交给了Controller处理，在Controller中响应View的事件，调用Model的接口对数据进行操作。一旦Model发生变化便通知相关视图进行更新。

M是指业务模型，V是指用户界面，C则是控制器：

• Model层用来存储业务的数据，一旦数据发生变化，模型将通知有关的视图。
  Model和View之间使用了观察者模式，View事先在此Model上注册，进而观察Model，以便更新在Model上发生改变的数据。
• V即View视图, 视图层。
  view和controller之间使用了策略模式，View引入了Controller的实例来实现特定的响应策略。如果要实现不同的响应策略只要用不同的Controller实例替换即可。
• 控制器是模型和视图之间的纽带。
  MVC将响应机制封装在controller对象中，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

坏处：

• MVC模式的业务逻辑主要集中在Controller，而前端的View其实已经具备了独立处理用户事件的能力，当每个事件都流经Controller时，这层会变得十分臃肿。
• MVC中View和Controller一般是一一对应的，捆绑起来表示一个组件，视图与控制器间的过于紧密的连接让Controller的复用性成了问题，如果想多个View共用一个Controller该怎么办呢？

2. MVP

MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出。

• 在MVC里，View是可以直接访问Model的，但MVP中的View并不能直接使用Model，而是通过为Presenter提供接口，让Presenter去更新Model，再通过观察者模式更新View。
• 与MVC相比，MVP模式通过解耦View和Model，完全分离视图和模型使职责划分更加清晰。

适用性：MVP适用于事件驱动的应用架构中，如windows forms应用。

不适用性：

• Presenter作为View和Model之间的“中间人”，除了基本的业务逻辑外，还有大量代码需要对从View到Model和从Model到View的数据进行“手动同步”，这样Presenter显得很重，维护起来会比较困难。
• 由于没有数据绑定，如果Presenter对视图渲染的需求增多，它不得不过多关注特定的视图，一旦视图需求发生改变，Presenter也需要改动。

3. MVVM

MVVM（Model-View-ViewModel）最早由微软提出，ViewModel指 “Model of View”——视图的模型。

MVVM把View和Model的同步逻辑自动化了，以前Presenter负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可。

好处：

• 比MVC/MVP精简了很多，不仅仅简化了业务与界面的依赖，还解决了数据频繁更新（以前用jQuery操作DOM很繁琐）的问题。
• 在MVVM中，View不知道Model的存在，ViewModel和Model也察觉不到View，这种低耦合模式可以使开发过程更加容易，提高应用的可重用性。

四、数据绑定

双向数据绑定，类似于ejs这样的模版引擎，但不同点在于它会根据数据变更实时渲染视图。

在Vue中，使用了双向绑定技术（Two-Way-Data-Binding），View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

不同的MVVM框架中，实现双向数据绑定的技术有所不同：

• Vue：数据劫持 + 发布-订阅模式。
• React：状态机 。

Vue采用数据劫持&发布-订阅模式的方式：通过ES5提供的Object.defineProperty() 方法来劫持（监控）各属性的 getter 、setter ，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。由于是在不同的数据上触发同步，为了可以精确的将变更发送给绑定的视图，所以不能对所有的数据都执行一次检测。

Vue中的双向数据绑定，大致可以划分三个模块：

• Observer 数据监听器
  负责对数据对象的所有属性进行监听（数据劫持），监听到数据发生变化后通知订阅者。
• Compiler 指令解析器
  扫描模板，并对指令进行解析，然后绑定指定事件。
• Watcher 订阅者
  关联Observer和Compile，能够订阅并收到属性变动的通知，执行指令绑定的相应操作，更新视图。Update()是它自身的一个方法，用于执行Compile中绑定的回调，更新视图。

数据劫持运用到了ES5中提供的一个对象方法，Object.defineProperty，通过defineProperty来劫持或者说来监控各个属性，因为每个属性内部都有两个方法，get方法和set方法。通过Object.defineProperty这个方法来劫持各个属性的set方法和get方法。

这样就能在数据，或者说某一个对象发生变动的时候，即时的去通知订阅者。通知了订阅者之后，就会触发相应的监听回调，
为了可以更加精准的将变化发送给绑定的视图，所以不能只对数据进行一次检测。

Vue的双向数据绑定在底层运用到了三大模块：Observer数据监听器，Compiler指令解析器和Watcher订阅者。
Observer负责对所有的数据对象里面所有的属性进行监听，也就是对data里面所有的属性进行监听。监听就是进行数据劫持。
，一旦监听到了数据的变化，它就会通知订阅者。

Compiler是指令解析器，用来扫描实例关联的模板，在扫描的过程中，它会对模板里面的指令进行解析，然后绑定指定的事件，这是它的第一个功能。它还有第二个功能，它也会订阅模板里面的数据变化，绑定一个更新函数给到Watcher。

Watcher 订阅者，watch用来关联observer以及compiler, 能够订阅并且收到所有属性变化的通知，然后同时他一旦订阅到了，就会执行指令绑定的相应的操作，然后通过它来更新对应的视图，通过调用update()方法来更新视图。update是watcher自身的一个方法，主要用于执行compiler里面的一些回调，因为compiler主要是用来扫描模板的，同时对里面的一些指令进行解析，绑定事件，绑定的事件有回调，也就是说 触发compiler里面的回调，从而更新界面。

这就是vue的双向数据绑定技术。