Vue 单向数据流和数据双向绑定

一、 单向数据流 --- 只能从一个方向修改数据

      数据从父组件传给子组件，只能单向绑定，子组件对父组件的数据只能访问不能修改。

      父组件通过props传递数据给子组件，父组件是不能是直接访问子组件的数据的。

二 、 数据双向绑定原理

     1.  vue.js 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter， getter ， 在数据变动时发布消息给订阅者，触发性赢得监听回调事件。下面先介绍Object.defineProperty() 这个方法：

vue通过数据劫持的方式来做数据绑定，其中最核心的方法就是通过Object.defineProperty()来实现对属性的劫持，可以再设置或获取的时候在get或者set方法里加入其它触发函数，来进行数据监听

    2. vue是如何实现的呢 ？ 

首先原理图如下：

1.obsever用实现对每个vue中的data中定义的属性循环用Object.defineProperty() 实现数据劫持，以便利用其中的setter 和 getter,然后通知订阅者，订阅者会触发他的update方法，对视图进行更新。

 2.  我们介绍为什么要订阅者，在vue中v-model，v-name，{{}}等都可以对数据进行显示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变，于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model='name'和{{name}}有两个对应的订阅者，各自管理自己的地方。每当属性的set方法触发，就循环更新Dep中的订阅者。

3. 代码实现

4.总结

  首先回味每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep，然后在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会，接着为input会添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。