Why I like Vue over React – Munawwar – Medium

  • i. trigger state change through props + listen to componentWillReceiveProps(), which can then change the internal state of the child component
  • Vue.js gives an easy way to access child components using “ref” attribute on the component’s custom element.
  • 3. Attaching events to component root element: When it comes to parent component listening to events on a child, I prefer to attach anonymous functions as event handlers to the root element of the child.
  • Vue.js, gives ability to directly attach an event handler by defining a “v-on:eventname.native” attribute on the component’s custom element.
  • [A gotcha is that $refs isn’t available until the component renders.

As a person who have spent time writing his own JS framework, I am nitpicky, when it come to frameworks. When it comes to React, there are several things I don’t like, which Vue.js seems to have…

@VueJsNews: Why I like Vue over React – #vuejs #reactjs

As a person who have spent time writing his own JS framework, I am nitpicky, when it come to frameworks. When it comes to React, there are several things I don’t like, which Vue.js seems to have solved in nice ways (out of the box):

[Besides, babel is a huge dependency that adds to the build system, which I try to avoid. Its 150MB when a full browser — Chrome debian extracted, is 178 MB. Ridiculous!]

2. Updating child components: With React, if one isn’t using Redux, there are two ways to trigger state change on a child component:

i. trigger state change through props + listen to componentWillReceiveProps(), which can then change the internal state of the child component

or

ii. keep a reference to child component(s) in the render and then call a method on the child component, which in turn changes the internal state of the child.

I personally find method (i) convoluted and rather prefer (ii). However React recommends (i). On the other hand, Vue.js gives an easy way to access child components using “ref” attribute on the component’s custom element. (Besides it looks more nicer/readeable than keeping references to child components in JS with React).

You might be thinking: “Why not just use Redux”? My question is why add the additional layer when the application/website is small?

[A gotcha here is that $refs isn’t available until the component renders. I solved this with the JS framework I wrote in the past, by rendering the component in-memory, on construction. This helps in resolving *most* of the references to child components, if not all. It also avoided a “not rendered” internal state, which avoided several checks in the library code, avoiding bugs, simplifying code for both the developer and the maintainer. <- Vue.js maintainers, if any of you reading this, take that as a potential idea/suggestion.] 3. Attaching events to component root element: When it comes to parent component listening to events on a child, I prefer to attach anonymous functions as event handlers to the root element of the child. This makes both the parent and the child easier to refactor if/when needed. With React, one has to pass function(s) through props (which introduces a name) to attach an event handler to the root element of a component. Vue.js, gives ability to directly attach an event handler by defining a “v-on:eventname.native” attribute on the component’s custom element. It avoids any named property on the child and is much more declarative, nicer to read. 4. Let’s say I need to implement an abstract pop-up modal, that has two different body and footer shown at two different places in the website. The React way is to define props, and use them in the render function. But with Vue, one can define it with placeholders (Vue calls it “slots”)as:

Why I like Vue over React – Munawwar – Medium