Vue真的实现了双向数据绑定吗？

前端技术面试的时候，当问道有关Vue技术问题的时候，“什么是MVC？什么是双向数据绑定？”，这种问题几乎是必问的。MVC非常好回答，给出如下解释：

M：Model 模型——数据层
V：View 视图——表现层
C：Controller 控制器——业务逻辑层
实现各层之间的完全分离，MVC只是手段，目的是实现代码的复用。

双向数据绑定相信绝大多人数都会这样回答：

简单来说数据既可以流入，也可以流出。视图层的改变会影响数据层的改变，数据层的改变也会相应的改变视图层。

其实Vue是单向数据流，并没有实现双向数据绑定。我们知道，要想实现双向绑定的效果，就要在表单元素中加入v-model="xxx"指令，这样视图层的改变相应的数据层才会改变。v-model是vue给我们提供的内置指令，而内置指令的作用就是用来操作DOM，它其实是封装了处理DOM的逻辑，从而简化了我们的代码，v-model的作用就是用来监听我们的视图层数据是否发生了改变，如果改变了，就把相应的数据层数据也进行改变，这种v-model内置指令的功能完全可以通过vue的自定义指令来手动实现，只不过作者已经为我们封装好了，方便我们频繁的使用v-model指令。如果我们没有在表单元素中加入v-model指令，视图层的改变并不能影响数据层，反过来数据层的改变确可以影响到试图层，这是因为MVC中的C端替我们更新了DOM中的数据，这个C端的控制器也只是实现了数据层数据流入视图层的功能，也就是所谓的单向数据流，而v-model仅作为一个语法糖指令，替我们实现了数据从视图流入数据层的效果。
综上，vue的控制器只实现了单向数据流。如果非要说vue实现了双向数据绑定，那我们也可以用JQ模拟双向数据流，难道我们能说JQ也实现了双向数据绑定吗？

止水
于沈阳
2019/04/08 22：41