| Where Vue is better: 1. Template syntax. While this is just my own preference, my Vue template is 20% shorter than JSX equivalent, mostly due to fewer brackets and better HTML's class support. 2. Computed property: this is so cool and efficient because computed properties are cached (equivalent to Mobx). We also have computed setter as well. 3. Built-in 2-way binding for inputs. Yes I know React people will condemn me to hell for this, but this has been a heaven for form-heavy application. This also makes the HTML you write much much shorter. 4. Prop mutation: this one is extremely controversial. Imagine this.props.foo = newFoo" in React (in Vue land it's "this.$emit('update:foo', newFoo)"). This is useful in situation where you want to mutate a parent's state without going to all the boilerplate of writing store/actions/dispatch. For example <div>
{{ user.firstName + ' ' + user.lastName }}
<popup-update-user user.sync="user>
</popup-update-user>
</div>
By looking at the above code, I can tell that <popup-update-user> will take an object called "user" in, modify it (and probably calls an API), then update the user object back to me. Of course I can do all that in the Vuex store (or in your favourite Redux flavor, but imagine all the code that has to be written)5. Watch expression: it's beneficial and concise if you know what you're doing and not abusing it. This doesn't even exist in React. (edited: plain React doesn't have this, Mobx does) 6. Built-in Vuex support out of the box. Enough said. 7. Nuxt's offerings are superior to what Next can offer. Nuxt allows layout, param validation, node server middlewares, sass and Vuex integration, sensible configuration, and a system of plugins. 8. Filters: coming from functional languages that support pipeline operator, this has been dope to my eyes. Instead of writing: { formatDateTime(toDate(myDate), "DD-MM-YYYY") }
you can write it in a better way: {{ myDate | toDate | formatDateTime("DD-MM-YYYY") }}
Of course, the difference is just syntactic. But I hope in the future, Vue's filter can be cached just like computed properties.9. It doesn't need Babel. I dropped Vue into a legacy PHP Symphony project, wrote the Vue's template in a <script type="x/template"> and wrote the components in plain ES5 object, and it just works !!! 10. The event emitter is a better pattern than calling prop as a function. <MyImageGallery onImageSelected={doStuff} />
vs <my-image-gallery @imageSelected="doStuff" />
Again, you may argue that this is syntactic sugar, but for me it's clear just at a glance which props are "in-ward", and which props are "out-ward"11. Vue doesn't intefere with SVG attributes. in React, I have to convert "xlink:href" to "xLinkHref", which is annoying |
It is like shooting your future self in the foot.
On the other hand react make some things difficult because they are antipatterns, independently of react itself. (I'm looking at you number 4: Prop mutation...)