Also, I think I do prefer working with JSX versus using html templates. I prefer that close coupling of JS logic and JSX presentation.
The most appealing thing about Vue is that it seems to be more of a framework, maybe somewhere in the middle between base React/ReactDOM and Next.js.
To be quite honest, I'd probably stick with React if given the choice. My takeaway with Vue is it makes a number of choices for you out of the gate w.r.t to things like data store (Vuex) and routing (Vue-router) whereas with React you'd bolt these on yourself (i.e. mobx and found-router).
I also feel like Vue gives you many more opportunities to shoot yourself in the foot in weird and wonderful ways. For example, you can access the instance of a parent or child component without too much trouble whereas React does seem to go out of its way to prevent this.
React has a few quality of life improvements too, things like hooks (which may be in Vue now? Not sure) and being able to have components with multiple children at the root.
> you can access the instance of a parent or child component without too much trouble
$children was removed in vue3 https://v3.vuejs.org/guide/migration/children.html
> things like hooks
Vue doesn't have react style hooks, but the composition API fills a similar niche.
> being able to have components with multiple children at the root.
Vue3 seems to support this: https://v3.vuejs.org/guide/migration/fragments.html
I like de facto solutions instead of half-baked libraries that might have slight incompatability issues.
I also like the freedom and flexibility that vue offers rather than the weird guardrails that come with react.
But, with React, I rarely find myself wondering why the component isn’t re-rendering when something changes, whereas this happens frequently with Vue.
I also rarely find myself having to plan out how props will flow to state or when something needs to be a computed (or memoized) property. Things usually just kind of come together.
There are several reasons for this, but often times it comes down to either doing the wrong type of assignment that makes Vue lose its wrapper object around the property, or something to do with the way I use props as defaults for reactive state.
Which leads to another complaint - mixing props passed in to the component in the same space as the reactive state. This means the property needs a different name from the state property that it drives, it means having to mentally track which piece of data can be mutated because its state and which cannot because its a prop, and it often means wondering why your component isn’t re-rendering when your prop changes, only to finally realize you really need a computed prop or a prop watcher.
I don’t want to sound overly dramatic though. It doesn’t happen every day, it’s never prevented me from doing anything, and Vue (IMO) makes up for it in other ways like single file components with better styling options. It’s also possible I just haven’t used React enough.
But that said, in my experience, some of Vue’s magic that makes it simpler to get started with, is also what makes it trickier to work with as projects get larger.
Disclaimer: Vue 3 introduces hook like things that I haven’t tried, and perhaps make my complaints less valid.
I have a different experience though. I generally find React pretty mysterious, with very confusingly named methods, and several generations of approaches that are completely different from each other. (React Hooks changes everything...)
I used to occasionally find situations in Vue where something wouldn't re-render, but that almost never happens anymore. The main culprits are when a component never gets mounted (because it's in a v-if), or expecting reactivity before it gets mounted.
I hate the clumsiness of React, the lack of "methods" and simple event handlers, the need to be overly verbose everywhere.
I almost never use Vuex, fwiw. I find both Redux and Vuex (which apes it) are an incredibly complicated solution to the problem, and wish there was something simpler.
Once you get past the fundamentals, it's just choosing the features that you like better. Vue uses HTML-based templates by default which I find better for 99% of scenarios, and can also be generated by a server-side framework which makes it easy to integrate into existing webapps without rebuilding as a complete SPA.
Reactivity is another thing that all frameworks and state management as evolved to, since it's just automating what you were manually doing anyway. Mobx and the like were early versions but the composition API in Vue 3 is probably the most polished version of this with automatic tracking that does what you expect and intuitive effects/watchers.
Vue also has official projects vs the 'unofficial' official ones for React, but that's a purely subjective preference at this point.
I'm considering a move in the opposite direction for a few reasons:
1. React Native. I can build mobile apps using Vue via Ionic Framework / Cordova / Capacitor but that ecosystem is a nightmare (esp the Cordova/Capacitor split). React Native has more extensions available and the camera related ones are considerably more featureful.
2. Libraries/widgets. Vue has widget libraries available and (multi)select fields et al work great. But when you want something more advanced - a decent calendar picker for example - I always turn up a React library that does what I want, and the Vue one doesn't. [I suspect there's compatibility issues if you use too many React widgets - gras is always greener etc]
3. Expectation that you know React. I've had clients say "we use Vue, do you know it?" but I've had 10x more say "We use React, do you know it?".
I was merely offering an objective correction to the parent comment's statement:
> It hasn’t been maintained since October 2020
With composition API and Vue 3 bringing typescript support and hooks to me it's a no brainer to choose Vue.
One other thing is that I've seen people who are normally doing only backend pick up Vue in a day or 2, but React takes longer to grok. You're probably likely to find more people who have already learned React than Vue though, due to its popularity.
React also has a bigger community but I haven't felt that I was lacking when looking for Vue libraries.
React is: always right, sometimes slow
Vue is: always fast, mostly right
I prefer fixing performance bottlenecks later over having any doubt about the correctness of my view or debugging why this one property only sometimes becomes reactive. But I can see how others would feel differently.
What I don‘t like:
- jsx support is second class
- composition is wonky (better in3?)
- typescript is wonky (better in 3?)
- automatic reactivity is less predictable than the explicitness in React
- automatic reactivity on complex data structures is wonky
- no more than one component per file
- the "official" router is config based. I like the component composition of react-router
What I like
- way easier to learn for any previous web developer
- vuex. I think global state libs are overused but if you need one, it‘s nice and it‘s great that you don‘t have to glue it to the framework yourself
- significantly smaller and faster
- can realistically work without a bundler directly in any html page
I really liked The Vue class component pattern. Localized styles, logic, and markup, coherent state management built-in.
The tooling got more bloated in time, but it was still a breeze to work with.
I'm now trying to catch up with React again as industry tends to dictate—so far so good, but I liked the "pure"/Vue-flavoured HTML markup approach of Vue over JSX. It seemed to have all the benefits of JSX a la close-coupling in class components, but saves the wonky half-flavour of markup/logic—especially when it comes to working in TypeScript.
That said, maybe my tune will change after I spend more time in the React ecosystem again—especially trying to make more use of server-side rendering.
When I was looking to change jobs earlier this year I spoke with a lot of recruiters and they all said companies were looking for React developers, there were zero mentions of Vue. I don’t really regret my choice of learning Vue but React would have definitely been a selling point on my resume.
Will this change in a few years? Who knows. It feels like it’s React vs everyone else and as more and more projects get built in React I suspect the difference will widen even more.
We switched our main product to Vue last year, and we couldn't be happier. And, we advertise Vue in our job postings. And, we are hiring!
Overall I just have a strong aesthetic preference for Vue too. It feels clean and I have a higher appreciation for the quality of my work when I use it. React apps I work on always feel like they’re not quite “there”, there’s so many different parts that it never feels fully coherent to me.
Also Vue's automatic reactivity system is fine for small websites but for large apps it turns into an impossible to follow spaghetti nightmare.
I'd rather have jsx, all else being equal.
The worst part so far has been mostly related to the ecosystem. I find Next superior and better maintained than Nuxt, and the 2/3 transition situation looks like a really bad thing to me (sadly reminds me of the python 2/3 situation).
Also, it might have been caused by the specific teams I've been part of, but with react I always find there is a huge tendency to overengineer everything and make things a lot more complicated they should be in the name of purism or whatever reason. I consider myself as a more pragmatic person and Vue fits me a lot better overall.
It’s nowhere close to the python version debacle that I first came across back in 2012, which was already years old. Vue v3 is very new if not bleeding edge. And there are polyfills for new v3 features like the Composition API[0].
I've heard there is some pain upgrading Vue, but there is definitely pain when upgrading React.
At the moment one of our previous React projects "npm install" gives 4000 security issues.
> I think I do prefer working with JSX versus using html templates.
I thought I'd prefer JSX too, but I've come to much prefer Vue templates. Turns out that, while it's nice to have the "direct" control, I prefer seeing a full context that the template gives you, rather than having a lot of broken up parts, like JSX.
That said, it is slightly easier to refactor stuff in JSX.