为什么父组件和子组件之间的双向绑定不好?

时间:2016-05-30 14:38:13

标签: javascript angularjs vue.js

我主要在AngularJS进行开发,最近我正在调查Vue.js并阅读其指南,在一页上提到:

  

默认情况下,所有道具在子属性和父属性之间形成单向向下绑定:当父属性更新时,它将向下流向子,但不是相反。此默认值旨在防止子组件意外改变父级状态,这可能会使您的应用程序的数据流更难以推理。

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

我想知道是否有何时使用双向绑定的原则,何时不使用?

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

例如,假设我想创建自己的Vue.js或http://selectize.github.io/selectize.js/的AngularJS版本。

如果使用双向绑定,我只需将父组件的数组传递给我的Vue.js或AngularJS选择组件,然后让选择组件对其进行管理。

如果没有使用双向绑定,似乎替代方案是:

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

湾或者父级将具有手动设置数组的函数,然后将此函数传递给子组件

℃。子组件调度父组件侦听的事件,并更新其数组

我认为这些是替代方案吗?两者看起来都比较冗长,似乎没有带来太多好处。

这是一个例子,但我认为很多组件会遇到这个问题,另一个例子是如果我有一个产品选择器组件,将数组变量传入这个组件会很方便,并让组件管理数组以反映所选产品。

我对此的主要问题是:

  1. 我对双向绑定替代方案的看法是否正确?

  2. 对于上述情况,使用单向下绑定是否有优势? (我没有看到替代方案提供了很多优势来避免"意外地改变了父母的状态")

  3. 如果(1)和(2)是正确的,那么单向下绑定的示例是什么,提供明显的优势以避免"意外地改变父母的状态"?

1 个答案:

答案 0 :(得分:1)

“单向下绑定”只是一个原理,类似于OO的封装,以降低代码复杂性。

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

在您的示例中,产品选择器与本机输入类似,当然我认为您可以使用双向绑定,就像v-model一样。