单向数据流和双向数据绑定有什么区别，以及他们的优缺点？

什么是单向数据流

数据流，表明的是数据流向，用大白话说就是数据传递。那么单项数据流 是我们的数据单一方向传输。对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性。

什么是双向数据绑定

当我们在前端开发中采用 MV*的模式时，M - model，指的是模型，也就是数据，V - view，指的是视图，也就是页面展现的部分。通常，我们需要编写代码，将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致
而另一方面，页面也会通过用户的交互，产生状态、数据的变化，这个时候，我们则编写代码，将视图对数据的更新同步到数据，以致于同步到后台服务器

单线数据流的优缺点？

优点：
所有状态的改变可记录、可跟踪，源头易追溯;
所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性;
一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data);
如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。
缺点：
HTML 代码渲染完成，无法改变，有新数据，就须把旧 HTML 代码去掉，整合新数据和模板重新渲染;
代码量上升，数据流转过程变长，出现很多类似的样板代码;
同时由于对应用状态独立管理的严格要求(单一的全局 store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。

双向数据绑定的优缺点？

优点：
用户在视图上的修改会自动同步到数据模型中去，数据模型中值的变化也会立刻同步到视图中去；
无需进行和单向数据绑定的那些相关操作；
在表单交互较多的场景下，会简化大量业务无关的代码。
缺点：
无法追踪局部状态的变化；
“暗箱操作”，增加了出错时 debug 的难度；
由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱，若再缺乏“管制”手段，血崩。
这样来看，单向绑定跟双向绑定在功能上基本上是互补的，所以我们可以在合适的场景下使用合适的手段。比如在 UI 控件 中(通常是类表单操作)，我会使用双向的方式绑定数据；而其他场景则统一采用 单向 + inline event ( <component :msg=“msg” @update=“updateMsg(msg)”> ) 的方式构建应用。