Did Vue copy React, or did React copy Vue?

Many people, upon seeing Vue 3's Composition API, immediately think, “Isn't this just React Hooks? Vue is copying React!”

But in fact—React Hooks did come first!

📆 React Hooks:

Proposed at React Conf in 2018

Officially released with React 16.8 in 2019

📆 Vue Composition API:

Draft proposed in mid-2019

Officially released with Vue 3 in 2020

🤔 So Vue did indeed “borrow” the compositional logic syntax from Hooks.

But don't jump to conclusions. Vue didn't simply copy Hooks; it took a completely different technical approach:

✅ Vue has a complete reactive system (ref, reactive, watch)

✅ Logic reuse is more modular than React, making it easier to write

✅ Unlike React, it doesn't have to deal with the various dependency issues of useEffect...

In short: Vue Composition API is more like an “evolved version” of Hooks, and many developers find it more elegant than React.

🎯 In summary:

❌ Vue didn't invent the compositional approach first

✅ Vue came later but did it more thoroughly

🔁 Both sides have learned from and borrowed from each other

Besides, isn't React 18 also slowly moving toward Vue's “reactive” and “fine-grained updates” direction? 😉

🌊 The evolution of frontend development has never been about copying each other, but rather about mutual inspiration and competition.

As developers, the real winners are those who can use it comfortably!

💬 Which approach do you prefer? Hooks or Composition?

tian

•

5months ago

Newbie

The optimization directions of the two are fundamentally different due to the distinctions between GPL and DSL. JavaScript/TypeScript is difficult to optimize at compile time, while DSL enables optimizations such as not performing diffs on static VDOMs during compilation. This is why Vue focuses its optimization efforts on the compile time, while React prioritizes runtime optimization (Fiber). At this level, I believe Vue can indeed achieve better performance than React. Moreover, the essence of Fiber is not “performance improvement” but “perceptual improvement.”

As for update granularity, Vue is not particularly granular either. Although it uses a point-to-point reactive approach based on state dependency collection, the final update is still a component-level update, with the exception that the render to child components automatically performs “memoization.” As long as React does not update the state and child components use memoization, there is little difference in this regard. Even if memoization is forgotten, as long as the state and props references remain unchanged, Fiber will directly enter the bailout phase during the beginWork stage, skipping the subsequent diff, though it will execute an invalid component function. Moreover, in complex projects, state management libraries are commonly used, and MobX can also achieve point-to-point updates. As long as memoization is properly implemented, there is no difference in terms of update impact compared to Vue.

It is worth noting that there are quite a few concepts derived from or referenced by React compared to Vue, which is great for broadening your horizons in front-end development.

Finally, the performance gap between the two frameworks does not have a significant impact at the business code level, with scores of around 70 and 75. However, if React developers lack the necessary skills, their scores may drop to 60, while Vue scores remain relatively stable. If a scenario requiring performance above 90 arises, then GPU rendering-related technologies or native solutions must be used. Therefore, there is no need to prioritize one over the other solely based on performance in practical use. For example, I prefer React due to its intuitive and elegant development paradigm, as well as its various design patterns and concepts. Vue 3 has become somewhat similar to React's paradigm in terms of functions, but it is not yet as pure.

...