4 ms·

I'm new to these kind of frameworks. I have been hacking away some small apps. Do you mind explaining why two-way data-binding is a "bad" thing?

Klathmon 9y ago
I'm not the guy you asked, but for me it's not that 2 way binding is bad, it's that one way binding is better. Using one-way binding you get a very clear picture of how data flows through the components. Components pass data to their children via props, and get data back from the children via callbacks. It forces you to be more explicit with how things are working. With 2 way binding, you don't have any guarantees that the child won't be modifying what you pass in, and in many cases i've found that it's difficult to see which direction data is flowing just by looking at the component. If your component had a property named "value", is it the component filling that in and passing it to the parent? is it the parent passing the value to the child? With 1-way binding you know value is being passed "down" to the child, and a property named something like "onChange" will be the callback that it uses to pass data back "up".
- wintorez 9y ago
  I couldn't agree more with the above. I firmly believe that "Explicit is Better than Implicit".
- madeofpixels 9y ago
  Thanks for the reply. I think I can understand why two-way data-binding would be bad on a complex app. Or even with more than one person working on the app.
  - Klathmon 9y ago
    No problem! And again I do want to stress that two-way binding isn't necessarily bad in my opinion, it just doesn't "require" the explicitness that one way binding does. I have seen 2-way binding work wonderfully when used with some strict guidelines or with external tools that can enforce some of that explicitness. And it can have it's benefits! 2-way data binding is often simpler, and can be faster than one way binding (it's really just a fancy term for "pass by reference").
- kylestlb 9y ago
  FYI, Two-way binding in VueJS isn't about parent-child communication. It's about binding to input fields and other interactive HTML elements: "You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases." So... I think the term "two-way binding" is overloaded here, and paints an improper picture of what VueJS is actually about.
marxidad 9y ago
In general, it's harder to reason about as to which way the data is flowing.

Klathmon 9y ago

I'm not the guy you asked, but for me it's not that 2 way binding is bad, it's that one way binding is better. Using one-way binding you get a very clear picture of how data flows through the components. Components pass data to their children via props, and get data back from the children via callbacks. It forces you to be more explicit with how things are working. With 2 way binding, you don't have any guarantees that the child won't be modifying what you pass in, and in many cases i've found that it's difficult to see which direction data is flowing just by looking at the component. If your component had a property named "value", is it the component filling that in and passing it to the parent? is it the parent passing the value to the child? With 1-way binding you know value is being passed "down" to the child, and a property named something like "onChange" will be the callback that it uses to pass data back "up".

wintorez 9y ago
I couldn't agree more with the above. I firmly believe that "Explicit is Better than Implicit".
madeofpixels 9y ago
Thanks for the reply. I think I can understand why two-way data-binding would be bad on a complex app. Or even with more than one person working on the app.
- Klathmon 9y ago
  No problem! And again I do want to stress that two-way binding isn't necessarily bad in my opinion, it just doesn't "require" the explicitness that one way binding does. I have seen 2-way binding work wonderfully when used with some strict guidelines or with external tools that can enforce some of that explicitness. And it can have it's benefits! 2-way data binding is often simpler, and can be faster than one way binding (it's really just a fancy term for "pass by reference").
kylestlb 9y ago
FYI, Two-way binding in VueJS isn't about parent-child communication. It's about binding to input fields and other interactive HTML elements: "You can use the v-model directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases." So... I think the term "two-way binding" is overloaded here, and paints an improper picture of what VueJS is actually about.

marxidad 9y ago

In general, it's harder to reason about as to which way the data is flowing.