You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* 2.0:
修改一处单词错误:hasEror=>hasError (volksbright#380)
simplify lru-cache example
Add tips about v-model vs initial values
skip unit test copying in makefile
reinstall carbon ads
update sponsors
Fixed links to Webpack and Browserify (volksbright#379)
remove todo for 2.0 webpack template
fix formatting in comment block
remove extra backtick typo
complete ssr guide first draft
clarify react vs vue render performance
Use the resolved URL for itunescn (volksbright#342)
Update "valid" to "normal" (volksbright#356)
# Conflicts:
# src/guide/ssr.md
# themes/vue/layout/partials/ad.ejs
Copy file name to clipboardExpand all lines: src/guide/comparison.md
+14-7
Original file line number
Diff line number
Diff line change
@@ -26,23 +26,30 @@ In every real-world scenario that we've tested so far, Vue outperforms React by
26
26
27
27
#### Render Performance
28
28
29
-
Here's a simplified way to think about it. In React, let's say the cost of rendering an element is 1 and the cost of an average component is 2. In Vue, the cost of an element would be more like 0.1, but the cost of an average component would be 4, due to the setup required for our reactivity system.
29
+
When rendering UI, manipulating the DOM is typically the most expensive operation and unfortunately, no library can make those raw operations faster. The best we can do is:
30
30
31
-
In extreme cases, such as using 1 normal component to render each element, Vue will probably be slower. However, both Vue and React offer functional components that would typically be preferred in a situation like this. As of writing, React plans to offer performance improvements for functional components, making them roughly the cost of elements. Vue's functional components already offer that optimization, so that when using functional components, Vue should then perform about 20 times as fast in this scenario, but only 10 times as fast after React optimizes their functional components.
31
+
1. Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well.
32
+
2. Add as little overhead as possible on top of those DOM manipulations. This is an area where Vue and React differ.
33
+
34
+
In React, let's say the additional overhead of rendering an element is 1 and the overhead of an average component is 2. In Vue, the overhead of an element would be more like 0.1, but the overhead of an average component would be 4, due to the setup required for our reactivity system.
35
+
36
+
This means that in typical applications, where there are many more elements than components being rendered, Vue will outperform React by a significant margin. To demonstrate this, let's render a list of 10,000 items in a single component. In Chrome 52 on my 2014 Macbook Air, [Vue renders](https://jsfiddle.net/chrisvfritz/859gL422/) in an average of 60ms, while [React renders](https://jsfiddle.net/chrisvfritz/65ojbkab/) in an average of 127ms.
37
+
38
+
In extreme cases however, such as using 1 normal component to render each element, Vue will usually be slower. When modifying the previous examples accordingly, [Vue renders](https://jsfiddle.net/chrisvfritz/mk8jaqpg/) in ~585ms, while [React renders](https://jsfiddle.net/chrisvfritz/2sx0341o/) in ~157ms! This isn't the end of the story though. Both Vue and React offer functional components, which are preferred in situations like this. Since functional components are closer to the cost of elements, Vue is once again on top, with [~73ms](https://jsfiddle.net/chrisvfritz/413wjqyf/) vs [~144ms](https://jsfiddle.net/chrisvfritz/kss01xg7/) - and this performance boost only required adding a single line for Vue: `functional: true`.
32
39
33
40
#### Update Performance
34
41
35
42
In React, you need to implement `shouldComponentUpdate` everywhere and use immutable data structures to achieve fully optimized re-renders. In Vue, a component's dependencies are automatically tracked so that it only updates when one of those dependencies change. The only further optimization that sometimes can be helpful in Vue is adding a `key` attribute to items in long lists.
36
43
37
-
This means updates in unoptimized Vue will be much faster than unoptimized React and actually, due to the improved render performance in Vue, even optimized React will usually be slower than Vue is out-of-the-box.
44
+
This means updates in unoptimized Vue will be much faster than unoptimized React and actually, due to the improved render performance in Vue, even fully-optimized React will usually be slower than Vue is out-of-the-box.
38
45
39
46
#### In Development
40
47
41
-
Obviously, performance in production is the most important and that's what we've been discussing so far. Performance in development still matters though. Both Vue and React remain fast enough in development for most normal applications.
48
+
Obviously, performance in production is the most important and that's what we've been discussing so far. Performance in development still matters though. The good news is that both Vue and React remain fast enough in development for most normal applications.
42
49
43
-
However, if you're prototyping any high-performance data visualizations or animations, you may find it useful to know that in scenarios where Vue can't handle more than 20 frames per second in development, we've seen React slow down to 2 frames per second.
50
+
However, if you're prototyping any high-performance data visualizations or animations, you may find it useful to know that in scenarios where Vue can't handle more than 10 frames per second in development, we've seen React slow down to about 1 frame per second.
44
51
45
-
This is due to React's many heavy invariant checks, which help it provide many excellent warnings and error messages. We agree that these are important in Vue, but have also kept an eye on performance while we implement these checks.
52
+
This is due to React's many heavy invariant checks, which help it to provide many excellent warnings and error messages. We agree that these are important in Vue, but have tried to keep a closer eye on performance while we implement these checks.
46
53
47
54
### HTML & CSS
48
55
@@ -140,7 +147,7 @@ For large applications, both Vue and React offer robust routing solutions. The R
140
147
141
148
Another important difference between these offerings is that Vue's companion libraries for state management and routing (among [other concerns](https://github.com/vuejs)) are all officially supported and kept up-to-date with the core library. React instead chooses to leave these concerns to the community, creating a more fragmented ecosystem.
142
149
143
-
Finally, Vue offers a [CLI project generator](https://github.com/vuejs/vue-cli) that makes it trivially easy to start a new project using your choice of build system, including [Webpack](github.com/vuejs-templates/webpack), [Browserify](github.com/vuejs-templates/browserify), or even [no build system](https://github.com/vuejs-templates/simple). React is also making strides in this area with [create-react-app](https://github.com/facebookincubator/create-react-app), but it currently has a few limitations:
150
+
Finally, Vue offers a [CLI project generator](https://github.com/vuejs/vue-cli) that makes it trivially easy to start a new project using your choice of build system, including [Webpack](https://github.com/vuejs-templates/webpack), [Browserify](https://github.com/vuejs-templates/browserify), or even [no build system](https://github.com/vuejs-templates/simple). React is also making strides in this area with [create-react-app](https://github.com/facebookincubator/create-react-app), but it currently has a few limitations:
144
151
145
152
- It does not allow any configuration during project generation, while Vue's project templates allow Yeoman-like customization.
146
153
- It only offers a single template that assumes you're building a single-page application, while Vue offers a wide variety of templates for various purposes and build systems.
Copy file name to clipboardExpand all lines: src/guide/forms.md
+7
Original file line number
Diff line number
Diff line change
@@ -359,6 +359,8 @@ vm.selected.number // -> 123
359
359
360
360
You can use the `v-model` directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
361
361
362
+
<pclass="tip">`v-model` doesn't care about the initial value provided to an input or a textarea. It will always treat the Vue instance data as the source of truth.</p>
363
+
362
364
### Text
363
365
364
366
```html
@@ -406,6 +408,11 @@ new Vue({
406
408
</script>
407
409
{% endraw %}
408
410
411
+
412
+
{% raw %}
413
+
<pclass="tip">Interpolation on textareas (<code><textarea>{{text}}</textarea></code>) won't work. Use <code>v-model</code> instead.</p>
0 commit comments