javascript - 为什么父组件和子组件之间的双向绑定(bind)不好？

Question

我主要在 AngularJS 中进行开发，最近我正在研究 Vue.js 并阅读它的指南，在它提到的一页上:

By default, all props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This default is meant to prevent child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to reason about.

这是来自 https://vuejs.org/guide/components.html#Prop-Binding-Types .

我想知道何时使用双向绑定(bind)，何时不使用是否有任何原则？

对于子组件需要管理数组变量的情况，似乎双向绑定(bind)是有意义的。

例如，假设我想制作自己的 Vue.js 或 AngularJS 版本的 http://selectize.github.io/selectize.js/ .

如果使用双向绑定(bind)，我只需将父组件的数组传递到我的 Vue.js 或 AngularJS selectize 组件，并让 selectize 组件管理它。

如果不使用双向绑定(bind)，似乎替代方案是:

一个。添加/删除项目时，父组件要么必须手动更新数组

或者父组件有一个手动设置数组的函数，然后将这个函数传递给子组件

子组件派发父组件监听的事件，并更新其数组

我认为这些是备选方案？两者似乎都比较冗长，而且似乎没有提供太多好处。

这是一个例子，但我认为很多组件都会有这个问题，另一个例子是如果我有一个产品选择器组件，只需将一个数组变量传递给这个组件，然后让组件管理阵列以反射(reflect)所选产品。

我的主要问题是:

1. 我对双向绑定(bind)替代方案的看法是否正确？

2. 对于上述情况，使用单向向下绑定(bind)是否有优势？ (我没有看到替代方案提供太多优势来避免“意外改变父级的状态”)

3. 如果 (1) 和 (2) 是正确的，请举一个单向向下绑定(bind)的示例，它提供了明显的优势来避免“意外改变父级的状态”？

Answer 1

“单向向下绑定(bind)”只是一种原则，类似于OO的封装，降低代码复杂度。

在我看来，作者并不是要不使用“双向绑定(bind)”(实际上 vuejs 支持)，只是说你不要滥用它。

在您的示例中，产品选择器类似于 native 输入，当然我认为您可以使用双向绑定(bind)，就像 v-model 一样。