The Difference Between Vue and React
ฝัง
- เผยแพร่เมื่อ 30 ส.ค. 2023
- 📗 Book (Updated Aug 2023): lachlanmiller.gumroad.com/l/v...
🐦 Twitter: / lachlan19900
Today I talk about the philosophical difference between Vue and React and how it impacts the reactivity system of the two frameworks. - วิทยาศาสตร์และเทคโนโลยี
I have worked on enterprise projects with both React and Vue 2 and 3. Based on my experience, Vue is comparatively lot better than React. As you said, it gives one fine-grained control and neat code with readability.
But react is more flexible, i switch my project from vue to react because of biggest community and flexibility
For basic interactivity I don't mind either. For complex interactivity that requires lots of data loading, timers, Dom syncing etc. I've found React to be more confusing for junior Devs and harder to debug all the race conditions that get introduce if you don't know how to use use effect effectively
Just want to point out this delightful mirroring at the end of your sentence "use use effect effect(ively)"! @@MichaelWalmsleyJr
@@luckyardhika3781 can you explain in what ways React is more flexible? Also, what exactly you wanted to have in Vue ecosystem that didn't exist and most importantly why you wasn't able to build it yourself?
@@luckyardhika3781it has bigger community yes, not sure about being more flexible
Both react and vue can do the same
Im a Senior backend developer and as you know we suck at front end 😀 but i worked with both react and vue (2,3) for me the react terminology was so of the grid …. I never could relate to all that hook names like useEffect useState …. But on the other hand vue was is just really really easy to relate … and now with Vue and composition api im sure i will never look back at react
Pathetic sinior failed in React 😂
I'm curious how did you managed to learn backend if you can't remember 2 hooks. please tell that it much easier to remember bunch of directives and lifecycle methods from Vue then 2 React hooks aaaand that's it because all events looks like native 😂
@@oinn6216 actually it’s not about just hooks it is about the design of the language. With Vue composition api i can easily adopt my backend knowledge with that in terms of architecture and competent relations and not focus on life cycles and those stuff.
@@oinn6216 Thats just two hook examples, there are more like useReducer or useImperativeHandle etc. I too think the naming makes no sense until you dive deep in the respective functionality.
@@oinn6216 its not about learning, its about how its getting used to backend programming. "rendering" concept is not in backend, so backend engs have hard time to understand whats going on. but vue seems more relatable to backend developers, at least for me.
believe me i have very good engineer friends, all experienced same for their "toy projects" that in their first time frontend development.
Worked few years with Vue, now few months with React and im done, im going back to Vue.
true. same with me, In vue. things are more transparent and more more sense. React is ugly
but unfortunately less jobs in Vue
@@user-re6im7dm1x that gonna change soon, as people start to appreciate vue
@@user-re6im7dm1xwe should push it forward and abandon react. I got a Vue job for 97k/year
Very well explained...the opt in/ opt out way of putting it really makes sense
Great side by side comparison and explanation, very insightful. Thanks a lot for sharing
I use Vue for a long time and I was wondering if I had to switch to React because it's easier to find React engineers than Vue engineers. But after watching this video I am going to keep Vue!
It's definitely easier to recruit and to find a job as a React dev, that's for sure. I've done a lot of React professionally, despite knowing Vue very well.
@@LachlanMiller Yes. Also, I saw another video from another YT channel showing side by side Vue and React for coding the exact same simple things. I don't like how React offers data binding or state management for example. I'm keeping Vue + Vite + Pinia 👍
Hi, how the name of that video?@@yannmasoch
Nice explananation! When I moved from Vue 3 to React for the first time I made some rookie mistakes on reactivity in React, that you pointed out. Like not assuming the rerenders on a double. They are quite different.
Woah, hey Erik - long time fan of your content, never thought you'd be commenting on one of my videos! Appreciate the complement!
I had the opposite experience of going from Vue to React - I like them both, but the fundamentals of the reactivity system are really different, and I have found knowing how your tool works, at least conceptually, to be very useful.
I trust Evan You and his team (Vue, Vite, Nuxt, Pinia, etc). Currently, Vite is used by several frameworks, including Angular recently.
if Vite is that good then Vue should be the same. because it's from the same developer.
helped me allot to understand Vue as a React developer, Good Teacher
I like both frameworks. I used React a lot back in my uni and worked as a Vue(2) developer - soon I have to migrate to Vue 3. I like both! I enjoy the simplicity of Vue and the ability to move fast, but in all honesty, I prefer React! Although it is more difficult to manage, the amount of experience you gain is unmatched! I had to, forcefully, learn a lot of things in React to implement good Apps, but with Vue, it was just there! so far working with Vue2, I feel like I had to spend more time learning the framework than learning how to think about the problem I'm solving. To me, React gives more opportunities to be a better programmer as you have to learn more concepts and be more involved. On the other hand, Vue is just more relaxing to work with
Briliant explaination!
Thanks a lot!
Great video, and just in time as always! 😁 🙏
Thanks!
Good, simple explanation accompanied with simple examples. This was good and informative. Thanks!
Thanks!
Great video, good explanation, straight to the point
Thank you!
Great. Thanks for sharing this video lachlan 😊😊
Thank you!
explanation 👌 loved it ❤
Solid material. Thanks a lot!
Thanks!
Great stuff, as usual, Lachlan, thank you. Looking forward to future content.
Thanks Cody - I am rejiggering my schedule so I have more down time to work on things like content creation.
Thanks for this video! ❤
Great video. This is exactly the type of breakdown I was looking for.
I am currently working on a react native application because as a Venezuelan I don't want to starve :D and I really miss Pinia and the reactivity system so much!
I tried RN once, it seems good for simple apps but not so great for complex ones. Building native apps with Vue sure would be nice, I think there's been a few things but nothing solid yet.
@@LachlanMiller I saw a vue-react-native connector but I didn't have a chance to try something different in this project
@@clustersnake I am Venezuelan and I live in Venezuela and before starting with Vue2 I did a study comparing with Reat, Angular and Svelt. In fact, the one I liked the least was React. I share this video for mobile applications: th-cam.com/video/IyK3ExPVR18/w-d-xo.html
I like your video. I come from React world and I have no clue about Vue but with this video I have a start point. Thank you for your work!
No problem, I've mostly got React contracts lately... happy with both, glad we have lots of solid choices in the frontend world nowadays!
this is probably the best video on internet, that explains the difference b/w react and Vue
Wow thanks!
Good explanation! Thanks
great video!
0:47
not very important but potentially good habit/convention for both readability (separation of concerns) and consistency with vue's approach:
you can extract the anonymous function from the jsx into an appropriately named const and then just simply pass it in the jsx event.
this way any changes you make to the logic will be done in the logic part of the code (just like in vue) and if you are writing a more complex function it would look ugly and clutter the jsx. this way, simple or complex, your logic consistently shows up where its expected and you and your team will frown less :]
edit:
the reason i mention consistency with vue is that its easier to switch or be good at both the more similar they are, in general
Vue's mental model seems easier to grasp, the code simpler to read and obviously performs better since it only renders what's needed vs everything each time.
I like this model better, but there's certainly something nice about React's "just re-render it all" model, too. It does make optimising a bit more difficult, though.
@@LachlanMiller yeah, especially since in react one has to explicitly define dependencies for reactive parts. Vue automatically resolves all those for the user. I'm talking about the dependency array in `useMemo` and the.. absence of any such thing in vue's `computed`.
Coding in react I feel like I'm constantly stressing myself to not forget something or make some mistake and tank performance. I feel like I'm babysitting react in a sense or hopping around mines on a field. When using vue, it feels more like I'm just putting my thoughts in code knowing the FW has my back. There's something about this DX that makes such a difference in how one _feels_ when using each, that it's hard to describe to others.
@@adiorthotos what about when using svelte or angular?
@@Feronom I used to be a staunt supporter of Angular after using it for >2y in prod and before I check vue. Angular is still a valid choice (as any FW is), especially for teams coming from Java or C# background which love object-oriented programming and enjoy "fluffy" code with lot's of fanfare and bike-sheding, although that (esp the first part) already shows some manager is doing something wrong and should be using competent front-end devs instead of back-end ones (the FE is way too advanced and complex these days) to fill a FE role. The other problem I now have with angular is that it's always a tech luggard. They were the last template-using FW to use AOT render functions (project Ivy), the last one to ditch TSLint, Protractor, Karma, Jest, Webpack, ... and it's noticeably less performant (althouh apps are more slowed down due to bad client code that FW overhead).
I have only little experience with Svelte. Till now, it seems to come with many of the good things Vue/Nuxt brings, without the ecosystem depth nor the vibrant community. It lacks JSX support, which (even though I don't like it) is necessary for cases where the template doesn't cut it, e.g. very dynamic rendering cases, often in library components. It's reactivity model is a leaky astractrion, IMO, much like Angular's with Zone.js . For example one can cut&paste a code from a .vue file's `` into a `useThing.ts` file and everything will keep working as expected. all the `$`-based DSL syntax from .svelte files isn't transferable/refactorable to .ts files.
Vue 3 has (AFAIK) the cleanest, most thorough reactivity model. And due to it being based on a JS primitive (Proxy) instead of creating a unique bespoke abstraction, as is the case with all other FWs mentioned, it results in having much fewer gotchas and footguns, having very good perf and being very intuitive and easy to learn (vs e.g. Angular).
I also like Svelte@@Feronom
Well said. Thank you!
Thank YOU
Hey, thanks for your video, very concise and well structured. I'm a huge Vue advocat and every time React forces me to write className in component props to pass some adjustment just makes me sick ☺️
Thanks for the comment. I enjoy Vue a little more but I think React is fine too, I don't really take issue with `className`. I miss 2-way binding with `v-model` the most.
Well said
Nice comparison! I've been a massive fan of Vue for years, but have recently started using React more and honestly... I'm enjoying it a lot. It feels closer to "actual" JavaScript and I think that's part of the appeal.
I've used both for many years and like different aspects of both. Spoiled for choice in the frontend ecosystem!
Ok more actual JS. Synthetic events? ok... How often do you use Set / Map in your React App? I can guess... never (except working with stm that support it like MobX). React don't repspect your REAL JS skills. In React you use just subset of JS: ReactScript. In Vue you aren't limited by framework capabilities as in React: use mutability. Use Objects, functions (composables you can use as normalk functions where you want. Hello for react 3 hooks rules), use ALL JS types as your want. I want to know. What makes React more "actual" JS than Vue?
@@zede1697 Hey, I am a little confused - are you saying you prefer React or Vue?
I use Set/Map pretty often, those are quite useful! I like working with both frameworks.
To be honest for me as I have a business, I use vue /Nuxt a lot more not because I want or because I feel in close to Javascript it's just I made different trust with 30+team with no experience. Everyone is more productive in vue that react and that's it they get shit and at lower level a lot more optimize than see react.... With better doc.
You use react if :
-you have time
- you have budget
-you need react native
- you are Already senior level in react and don't need to bother with anything else
There you're reason if not just use vuejs, time to market will be significantly lower, more performant and easier to upgrade
You the real MVP as always Lachlan
You are the real MVP
thanks for the video
Thanks for the comment!
i feel that react will eat my memory a lot if I forgot set terms in useEffect
Wow! best video eva
For the Vue side, it appears to me that you have a function called watchEffect, but when the button is clicked it is calling a function named onClick. I don't understand this.
I’m familiar with react and svelte, it seems like vue is really similar with svelte 5 rune mode, is there a big difference between the 2? I gave up on react because I don’t like the many, many warts of the reactivity system such as not being able to factor out code to anywhere but top scoop of function, and custom hook schenanigans. I feel fine grained reactivity is a lot more intuitive.
Not too familiar with runes - I think it's a step closer to Vue though, where reactivity is decoupled from the component and rendering system, which I like. I think from a user point of view Svelte/Vue might be conceptually similar, the actual implementation (fine grained compile type vs observer/tracking based) is quite different. Will need to learn more about Svelte runes! Do you enjoy working with those?
@@LachlanMillerI am still trying out Svelte 5 runes since it's so new. It feels amazing mainly because states are entirely consistent now across .svelte and .ts files, no more .subscribe() to stores which was the main cause of headaches. Now, they use Proxy object to make reactivity work plain ts files, and this is the most fun I've had since I first moved from angular to nextjs.
great
I want to code in vue but felt i needed to go the react way because of its popularity and React native for mobile apps.
This is fair, I use a lot of react too due to job market
Good video but was there a reason for using watchEffect? All that could’ve been accomplished with shallowRef and computed.
I was trying to make the Vue and React examples as similar as possible, useEffect and watchEffect are quite similar.
Where do I start from, I'm studying both and if you can point to any video to start. I do pure html, css and javascript
Good question. I knew some coding already (C, Ruby etc) when I came to frontend. I learned HTML/JS/CSS and Vue all at the same time, it was a bit confusing (which is Vue? which is regular JS?)
I think it's fine to start with a framework like Vue/React, just learn HTML/JS as you go. Main thing is to build something!
@@LachlanMiller thanks buddy
How are you managing to run Vue and React at the same time? Are you utilizing micro-frontend technology on this example?
No, I just import them both and mount the apps on different DOM elements. Eg
It's a bit unclear and i haven't see some good explanation how does vue know that there was a change in some of the ref variables. Like is it some setInterval that check it or some hidden setter function?
It creates a map of all dependencies for each reactive effect. See th-cam.com/video/HzhcXVFEiVY/w-d-xo.html or lachlan-miller.me/articles/vue-3-reactivity-from-scratch
Great
That’s why I use MobX with react.
Yeah for sure, love MobX + React combo
Great video but I think your explanation at 9:40 may cause someone to think React does not return "new" JSX
One of the things that i find better in Vue over react is when you add conditions and other things like this
The directives make the code easier to read when you have something more complex than a counter
I have meet a lot of devs that comed from different backgrounds and they first used react and were apprehensive at the code but when using vue they felt all the pain points go away
a lot of react slander on the CS. i am still a react fan. but this video is a good comparison between both.
I think they’re both great!
Do you appreciate: Vue3.js+Django+Django Rest API???
I have not done django before but python is pretty cool
At 4:50, you click the Vue button twice but the datetime only updated once. Did you click twice in one second? Or was it not supposed to update twice?
I think I clicked twice in one second. I just tested it out, it does indeed update the timestamp as expected. Watching this back, the time between clicks feels slow, but it must be *just* within one second.
@@LachlanMiller Thank you for clarifying.
@@ControlProblem thank YOU for watching!
@@ControlProblem thank you for watching!
I see a lot of comments here saying "1 of million reason why Vue is better than React" or "I switch to React because of the ecosystem". I'm reality you can do exactly the same thing with both there is no functional differences. Only a matter of programming paradigm. If you like mutations, what most of us probably grew with classes and method then Vue will make most sense. If you are like me and have discovered and loved functional programming then React will make most sense. But you can't say I chose Vue because it has more tools because virtually anything Vue has can exist in React it is just simply that it hasn't been written yet.
I agree, both are fine. You can work in a mostly functional paradigm in Vue if that's your thing too. It doesn't really matter at the end of the day, both frameworks are more than capable.
I think you made a wrong comparison, because in vue you used ref, but in react - useState. That's quite different things.
What would you recommend? I think this is the idiomatic way to handle state in both frameworks.
For those thing vue code in this example is larger in size..
Actually vue code is smaller here because in react - count is incremented inline but vue, count is incremented in separate function which is creating illusion that code is larger in size. Add
Also vue 3 apps are much much faster than react and angular.
Personally I don't care too much about a few extra lines of code. I DO care about performance, though. Fully optimized Vue and React apps are roughly the same in my experience, but optimizing React code is a bit more effort (as explained in this video).
Opt-in is always better than opt-out.
At least four new allocations on every count update in this React component. And zero in Vue
No doubt there is room for optimisation, just an example to illustrate the difference in reactivity systems!
@@LachlanMiller I agree, but there seems to be no room for optimization for Vue reactivity system. Besides, React won't go to this optimization room, so to say, since it'd be a whole paradigm shift. React is based on a flawed immutability-first approach, which causes tons of allocations and loops (both in spreads and dependency array comparisons)
Thumbnail not comparable.
you highlights the real power of Vue, i feel better to code in Vue.
I feel great coding in Vue - especially with script setup and TS.
So Vue2 was inspired by Angular 1.x and Vue3 inspired by React niiiiice 😂
I think it's great how all the frameworks are inspiring each other!
And Vue Vapor is inspired by Solid.js)
In my opinion Vue 3 > React > Vue 2
With script setup in the Composition API Vue 3 certainly feels very different to Vue 2. I am pretty happy working in both frameworks, I think Vue has some nice ergonomics, React has some neat things on the horizon with the announcement of React 19.
I really can't understand why ANYONE would choose React over Vue. This looks embarrassingly inefficient and stupid!
I actually like both, I think there are good reasons to go with either!
It’s the industry standard.
Vue is better
All simple - if you planning to work for third world - learn Vue, if your clients in USA and EU - learn React. Also do you know any native apps on Vue or 3D rendering on Vue? All that made with React, Vue is for websites only. React is the simplest lib, even monkey can learn it, have no idea how anyone can have problems learning it.
React is pretty small and simple but once you add all the other libraries it gets pretty complex
Not sure on the Vue/React third world vs USA thing, I don't live in the USA but plenty of both in my country, def more React, I'd say React in general seems popular everywhere.
Toxic React dev who is afraid of learning new things detected.
@@buddh4rnot really. It’s just a fact that react is just everywhere. I personally prefer svelte, but now using react because that’s what everybody is using in the industry.
@@mke7605 I do not doubt that there are more react jobs out there, its rather the wording which makes me believe what I said... I say learn both and use the better tool for new projects if you can choose.
Vue code is so dummy. Tomorrow you looking code and don't know what code is doing.
Anti-javascript
Any examples of code you think is hard to understand in Vue?
This is very misleading, you approach your comparison and explanation from a React mindset where you are used to “infinite rendering react loop”.
This concept doesn’t exist in other frameworks (front or backend) where code is executed only once and you must “opt in” (to put it in your terms), this is something the react team had to purposely address in their new documentation because it’s not intuitive to new comers and you have to adopt this react way of thinking.
Thank god there’s alternatives (not just Vue), much better than react
Hi, thanks for the detailed comment. I am not sure what you mean by misleading - can you explain more about what you mean regarding "infinite rendering react loop"?
1 of 1milllion reason why you choose vue over react, not new