Skip to content

Commit 64e89c6

Browse files
committed
Merge branch '2.0' into 2.0-cn
* 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
2 parents 013ce2e + 8d83284 commit 64e89c6

File tree

15 files changed

+399
-65
lines changed

15 files changed

+399
-65
lines changed

src/guide/class-and-style.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ We can pass an object to `v-bind:class` to dynamically toggle classes:
178178
``` js
179179
data: {
180180
isActive: true,
181-
hasEror: false
181+
hasError: false
182182
}
183183
```
184184

src/guide/comparison.md

+14-7
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,30 @@ In every real-world scenario that we've tested so far, Vue outperforms React by
2626

2727
#### Render Performance
2828

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:
3030

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`.
3239

3340
#### Update Performance
3441

3542
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.
3643

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.
3845

3946
#### In Development
4047

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.
4249

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.
4451

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.
4653

4754
### HTML & CSS
4855

@@ -140,7 +147,7 @@ For large applications, both Vue and React offer robust routing solutions. The R
140147

141148
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.
142149

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:
144151

145152
- It does not allow any configuration during project generation, while Vue's project templates allow Yeoman-like customization.
146153
- 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.

src/guide/components.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -667,7 +667,7 @@ Let's see it in action:
667667
v-model="message"
668668
></my-input>
669669
</div>
670-
````
670+
```
671671

672672
``` js
673673
Vue.component('my-input', {
@@ -1130,9 +1130,9 @@ The factory function receives a `resolve` callback, which should be called when
11301130

11311131
``` js
11321132
Vue.component('async-webpack-example', function (resolve) {
1133-
// this special require syntax will instruct webpack to
1133+
// This special require syntax will instruct Webpack to
11341134
// automatically split your built code into bundles which
1135-
// are automatically loaded over ajax requests.
1135+
// are loaded over Ajax requests.
11361136
require(['./my-async-component'], resolve)
11371137
})
11381138
```

src/guide/forms.md

+7
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,8 @@ vm.selected.number // -> 123
359359

360360
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.
361361

362+
<p class="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+
362364
### Text
363365

364366
``` html
@@ -406,6 +408,11 @@ new Vue({
406408
</script>
407409
{% endraw %}
408410

411+
412+
{% raw %}
413+
<p class="tip">Interpolation on textareas (<code>&lt;textarea&gt;{{text}}&lt;/textarea&gt;</code>) won't work. Use <code>v-model</code> instead.</p>
414+
{% endraw %}
415+
409416
### Checkbox
410417

411418
Single checkbox, boolean value:

src/guide/installation.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -139,9 +139,8 @@ Vue.js provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly
139139
``` bash
140140
# install vue-cli
141141
$ npm install --global vue-cli
142-
# create a new project using the "webpack" boilerplate
143-
# !!TODO: THIS TEMPLATE DOES NOT EXIST YET
144-
$ vue init webpack-2.0 my-project
142+
# create a new project using the "webpack" template
143+
$ vue init webpack my-project
145144
# install dependencies and go!
146145
$ cd my-project
147146
$ npm install

0 commit comments

Comments
 (0)