YCM JasonOriginal post: https://www.ycmjason.com/blog/2018/05/09.html
I personally consider the following when it comes to choosing frameworks/libraries.
- The capability of them
- The developing experience with them
Capability
For capability, both of them are capable of doing the same things. They both utilise the virtual dom. And have similar component concepts. One thing that Vue is capable of but not React is the <transition> component. This makes building animated UI a lot simpler and gives you more control over it. (See more https://vuejs.org/v2/guide/transitions.html) In fact, due to Vue's capability with animations and transitions, I suspect this is the reason why Facebook built this site with Vue. (https://newsfeed.fb.com/?lang=en)
Developing Experience
In terms of developing experience, I would say Vue has its advantages over React.
Less steep learning curve
It is generally agreed that Vue has a less steep learning curve. Mostly due to the excellently written documentation and guides and the simplicity of the framework.
Furthermore, Vue is truly reactive. this.a = "hello world" would change the displaying text. Whereas in React, you have to do this.setState((prevState, props) => {...}) which is not very intuitive.
Vue is also easier to set up. vue-cli 3 provides a developer friendly interface to creating new projects. The project created has its development dependencies (e.g. testing frameworks, bundlers, linters...) installed as plugins. The philosophy behind this is to allow vue projects to stay up to date with the standards easily. Let's say one day Vue.js decided to use parcel, instead of webpack, as their recommended module bundler. Existing projects could switch to parcel seamlessly just by updating the bundler-plugin in their project without worrying about removing old stacks, installing new stacks and configuring them. (See this video about vue-cli 3.0: https://youtu.be/TRJMT9yjONQ?t=10m18s)
Vue is also very friendly to existing projects. You could use Vue in many ways, from including <script> tags to using bundlers like webpack/parcel/rollup. The fact that it is so flexible made Vue a great candidate to be included to existing projects without the need to introducing extra build steps.
Gitlab is one of the companies that replaces part of their website with Vue components. Find out more in this article: https://about.gitlab.com/2016/10/20/why-we-chose-vue/
Component-scoped CSS out of the box
It might be possible with React as well, but the way Vue handles that is simple and straightforward. Hence better developing experience.
Complete separation of html, js and css
Although in the same file (.vue), the three sections are clearly and intuitively separated in three tags (<template>, <script> and <style>). It is very very unlikely that one would mix them. Whereas in React, due to JSX, one could easily mix these three together and produce less maintainable code. This very often reminds me of my early days coding in PHP when I haven't got enough experience. This problem could be solved by following good standards, but wouldn't it be easier for us to go for something where this problem could hardly happen?
Vue has more official libraries
Routers and Stores are two of the main features that is essential to developing a large scale application. React has react-router and redux, but neither of them are official libraries of React. (Redux has been added to the official library as Facebook recruited the creator of Redux.) On the other hand, Vue has vue-router and vuex which are official libraries.
Well...
I was a fan of Angular.js when it first came out. Then switched to Angular 2. Then started using React when Angular 2 turns out to be too complicated to use. Loved React + Redux. Many concepts from React Redux are truly inspiring. Then I discovered Vue.js last summer, and I fell in love. Currently an active contributor of an official Vue project VuePress. (https://github.com/vuejs/vuepress)
Some people prefer using JSX and "do everything in Javscript". I respect their opinion but really hope that they make their decisions only after they have tried different alternatives. Otherwise you might miss out your next favourite thing.
