Vue vs. React in terms of Performance

Vue.js performs accurate DOM manipulations down to a single Text node. But when we talk about performance there are several situations to consider:

1. For any type of in-place data mutations, Vue vastly out-performs React. Any changes in Vue triggers the exact amount of re-render. In React, any state change will trigger that entire component sub-tree to re-render. This is mentioned in the Animations section of the original post. Even for situations where large amount of data is being mutated, Vue still out-performs React handsomely. For an example benchmark, see http://mathieuancelin.github.io/js-repaint-perfs/vue/opt.html vs. http://mathieuancelin.github.io/js-repaint-perfs/react/opt.html (Both fully optimized versions). Why? In short, Virtual DOM diffing is not free.
2. When replacing the entire state with fresh objects, Vue will have to spend extra work converting these new object to be “reactive”, but still offers comparable performance. See http://mathieuancelin.github.io/js-repaint-perfs/vue/ vs http://mathieuancelin.github.io/js-repaint-perfs/react/
3. For startup performance, React is in general a bit faster than Vue, but it depends on what type of content is being rendered. For huge data tables with a lot of simple cells (10k+), React is faster because the cost of each cell is a simple virtual element in React vs. a fragment in Vue (the latter being a bit more costly). However, for tables with fewer cells, or apps that contain a lot of components with complex markup, Vue actually performs better overall. Here is a comparison repo which unfortunately is in Russian, but the author was using React and Vue for a real use case and Vue was showing better startup performance. Here is another benchmark for rendering 1k rows, which also tests re-render, partial update and removal performance.
4. Most importantly, Vue’s runtime performance is optimized by default — the only perf hint needed is a “track-by” attribute on lists, which is comparable to React’s “key” prop. You don’t need to do anything else to get fully-optimized re-renders. In React, you will have to use pureRenderMixin or manually implement shouldComponentUpdate everywhere, or resort to Immutable data structures, which introduces a lot of extra complexity due to the language constraints of JavaScript.