Vue中如何不依赖框架实现类似响应式更新机制的数据绑定？

本文共计784个文字，预计阅读时间需要4分钟。

最近看到有人说Vue是双向数据绑定的，也有人说是单向数据流的。我认为这两种说法都是错误的。Vue是一款具有响应式更新机制的框架，既可以实现单向数据流，也可以实现双向数据绑定。

最近看到有些人说vue是双向数据绑定的，有些人说vue是单向数据流的，我认为这两种说法都是错误的，vue是一款具有响应式更新机制的框架，既可以实现单向数据流也可以实现数据的双向绑定。

2 单向数据流与数据双向绑定

单向数据流是指model中的数据发生改变时引起view的改变。

双向数据绑定是指model中的数据发生改变时view的改变，view的改变也会引起model的改变。

//这个是单向数据流，改变这个input的value值并不能是data中的text属性发生改变。 <input type="text" :value="text"> data:{ return { text:'文本输入框' } } //这个是双向数据绑定，无论是修改model还是修改view都能引起另一方的改变。 <input type="text" v-model="text"> data:{ return { text:'文本输入框' } }

3 vue中的数据双向绑定实现原理

vue给我们提供了实现数据双向绑定的两种语法糖，分别v-model和.sync修饰符，v-model用于为表单元素提供数据双向绑定，.sync修饰符用于为任意属性提供数据双向绑定，接下来我们来尝试不使用vue提供的语法糖，自己实现数据双向绑定。

要想view发生改变的时候引起model的改变首先要监听到view的改变，view发生改变时再去改变model，有了思路之后下面是代码实现。