vue的数据双向绑定原理

前言：

什么是数据双向绑定?

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化，数据也会跟着同步变化。这也算是vue的精髓之处了。单项数据绑定是使用状态管理工具（如redux）的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定？

在vue中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，vue的双向数据绑定用起来就特别舒服了。

即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

一 、vue双向绑定原理

1. vue中的v-model可以实现双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图
2. 具体步骤：

• 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
  这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
  -compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
• Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
  1、在自身实例化时往属性订阅器(dep)里面添加自己
  2、自身必须有一个update()方法
  3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
• MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

名词解释：
一、 什么是setter、getter？
对象有两种属性：
1 . 数据属性：就是我们经常使用的属性
2 . 访问器属性：也称存取属性（存取器属性就是一组获取和设置值的函数）

控制台打印：

数据属性就是a和b；
get和set就是关键字，他们后面各自对应一个函数，这个函数就是上面红字部分所讲的，存储器属性。
get对应的方法称为getter，负责获取值，它不带任何参数。set对应的方法 是setter，负责设置值，在它的函数体中，一切的return都是无效的。
二、什么是Object.defineProperty()?
对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。
定义对象可以使用构造函数或字面量的形式：

除了以上添加属性的方式，当然还可以使用Object.defineProperty定义新属性或修改原有的属性；
语法：Object.defineProperty(obj, prop, descriptor)
参数 ：
obj:必需，目标对象；
prop :必需，需定义或修改的属性的名字；
descriptor:必需，目标属性所拥有的特性；
返回值：

传入函数的对象，即第一个参数obj；

使用：