关于单向数据流的疑问

Question

老师你好，这节课里面讲到了单向数据流的概念，好像意思是"数据变了，UI跟着变化"，那么与之对应的就是"UI变化，数据跟着变化"，这是什么场景呢？我好像找不到一个具体的例子？另外，vue里面实现的v-model指令用于input上面，使input输入框里面的值变化后，数据就会发生变化是否就是双向数据流呢？这样带来的问题是什么呢？

Answer 1

阿莱克斯刘 2021-06-25 03:12:02

是的，找不到这种场景是正常的，因为数据双向绑定的思维已经过时了，早期的angularjs（1.x时代，2005年以前）使用的就是这种架构。但是，双向数据流本身就不太科学，angularjs时不时会陷入无限数据循环或数据脏读的过程中，于是几乎所有的框架都放弃了双向数据流的设计。

用input框举个例子吧：

1. 双向绑定：我们有个input框，数据绑定在state.input上，初始化state.input设置为“hello”，于是我们的html页面的input就会显示“hello”；这个时候，用户向input输入“world”，于是首先input框自己把内容（value）改为world，然后再把world推给state.input，从而改变数据内容。

2. 单向绑定：还是同样的input框，数据依然绑定在state.input上，初始化state.input还是设置为“hello”，于是我们的html页面的input同样还是会显示“hello”；但不一样的是，当用户向input输入“world”的时候，input的内容（value）是暂时不会改变的，而是首先会启动input的监听 onchange()，我们需要在onchange监听中根据用户输入来更新state.input的数据；最后，当state.input发生变化以后，会触发重新渲染input的ui，于是input框的hello就改变为world了。

单向流动的思路会稍微复杂一点，工作也会稍微多一些。但是他的渲染逻辑非常清新，有且只有state变化，才会触发ui重新渲染。从而避免了数据的无限循环、避免了脏读、避免了系统过度开销等问题，不管是性能、调试、还是代码逻辑都又了很大程度的提升。

• 提问者 慕莱坞0998854 #1

  老师你好，我没有接触过angularjs所以还不太懂双向绑定的缺点，但是我明白了vue的v-model是单向绑定，因为v-model其实是语法糖，我们也是先监听input事件，然后再把最新的值赋给input输入框的value以达到目的。
  但是这里又有了新的疑问，
  假如不使用任何框架，我们只要在input框里输入world,那么此时input框的内容就是world. 
  而老师说 
  “但不一样的是，当用户向input输入“world”的时候，input的内容（value）是暂时不会改变的”，react会阻止此时input框的value的改变吗？
  还是说此时input框的value会改变为world（input原生的行为），然后state.input改变为world，然后在给input的value赋值为world？这样不就冗余了嘛？

• 阿莱克斯刘 回复 提问者 慕莱坞0998854 #2

  你的理解没有错，对于vue、react 、angular（2以上）input的value数据改变永远都是从state流向ui的。这里面并没有冗余产生，只不过是赋值和ui渲染过程有点绕而已。