vue的响应式原理和双向绑定

**
vue的响应式原理和双向绑定到底是不是一个东西**？

一句话总结：不是一个东西。数据的响应式原理是vue的核心，而数据的双向绑定，实际上是基于响应式原理实现的。

虽然这两者之间不能完全画等号，但是它们之间的关系是十分紧密的

首先来分别了解一下实现原理

1、vue的响应式原理

（1）vue先通过object.defineProperty对数据进行观测（具体在源码中使用Observer类实现）。具体操作：遍历data，给每个属性添加了getter和seter方法，通过这两个方法来观测数据的读取和修改。

（2）收集依赖（数据改变会对哪些产生影响，哪些就是依赖）。vue为每一个依赖创建了一个watcher类，当通过watcher读取数据的时候，会触发getter，把这个watcher添加到dep（依赖管理器）中。

（3）当数据发生变化的时候，会触发seter，向这个数据的dep中的依赖发出通知更新的操作。依赖存储在一个数组中，因为一个数据与依赖的关系是一对多的。（这里触发了dep中的notify()方法，然后调用了watcher中的update()方法进行更新）

2、vue的双向绑定

在vue中实现组件的双向绑定

vue中最具有代表性的就是：v-model。
实际本质就是:value + @input方法的语法糖

原理：在子组件中绑定input的value属性，修改数据时，通过子组件中的$emit方法派发input事件，父组件监听input事件中传递的value值，并存储在父组件的data中，然后父组件再通过props的形式传递给子组件。

// 原生使用
<input v-model="message"/></input>
// 编译后的代码类似于
<input :value="message" @input="message=$event.target.value"/>

// 自定义组件中的v-model
<custorm-input v-model="message"/>
data(){
    return{ 
        message:''
    }
}

// custorm-input组件
<input :value=value @input="$emit('input',$event.target.value)"/>
props:[value]

总结
vue的响应式原理是确保数据的变化能被观测到，通过数据驱动dom视图的变化，是单向的过程。vue双向绑定建立在响应式原理的基础上，使得数据和视图的变化能实现双向的同步。