Skip to content

Commit cb985a9

Browse files
JinjiangJinjiang
authored
Synced recent updates to #dee0bfd (vuejs#566)
* Synced recent updates (#dee0bfd). * Code format. * typo
1 parent da9eeea commit cb985a9

20 files changed

+1421
-947
lines changed

‎src/v2/api/index.md

Lines changed: 72 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,15 +105,19 @@ type: api
105105

106106
### ignoredElements
107107

108-
- **类型**：`Array<string>`
108+
- **类型**：`Array<string | RegExp>`
109109

110110
- **默认值**：`[]`
111111

112112
- **用法**：
113113

114114
``` js
115115
Vue.config.ignoredElements = [
116-
'my-custom-web-component', 'another-web-component'
116+
'my-custom-web-component',
117+
'another-web-component',
118+
// 用一个 `RegExp` 忽略所有“ion-”开头的元素
119+
// 仅在 2.5+ 支持
120+
/^ion-/
117121
]
118122
```
119123

@@ -590,7 +594,8 @@ type: api
590594
data: {
591595
a: 1,
592596
b: 2,
593-
c: 3
597+
c: 3,
598+
d: 4
594599
},
595600
watch: {
596601
a: function (val, oldVal) {
@@ -602,6 +607,11 @@ type: api
602607
c: {
603608
handler: function (val, oldVal) { /* ... */ },
604609
deep: true
610+
},
611+
// 该回调将会在侦听开始之后被立即调用
612+
d: {
613+
handler: function (val, oldVal) { /* ... */ },
614+
immediate: true
605615
}
606616
}
607617
})
@@ -845,6 +855,28 @@ type: api
845855
846856
- **参考**：[生命周期图示](../guide/instance.html#生命周期图示)
847857
858+
### errorCaptured
859+
860+
> 2.5.0+ 新增
861+
862+
- **类型**：`(err: Error, vm: Component, info: string) => ?boolean`
863+
864+
- **详细**：
865+
866+
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 `false` 以阻止该错误继续向上传播。
867+
868+
<p class="tip">你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要，它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。</p>
869+
870+
**错误传播规则**
871+
872+
- 默认情况下，如果全局的 `config.errorHandler` 被定义，所有的错误仍会发送它，因此这些错误仍让会向单一的分析服务的地方进行汇报。
873+
874+
- 如果一个组件的继承或父级从属链路中存在多个 `errorCaptured` 钩子，则它们将会被相同的错误逐个唤起。
875+
876+
- 如果此 `errorCaptured` 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 `config.errorHandler`。
877+
878+
- 一个 `errorCaptured` 钩子能够返回 `false` 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 `errorCaptured` 钩子和全局的 `config.errorHandler`。
879+
848880
## 选项 / 资源
849881
850882
### directives
@@ -942,7 +974,7 @@ type: api
942974
943975
- **类型**：
944976
- **provide**：`Object | () => Object`
945-
- **inject**：`Array<string> | { [key: string]: string | Symbol }`
977+
- **inject**：`Array<string> | { [key: string]: string | Symbol | Object }`
946978
947979
- **详细**：
948980
@@ -1024,6 +1056,42 @@ type: api
10241056
}
10251057
```
10261058
1059+
> 在 2.5.0+ 的注入可以通过设置默认值使其变成可选项：
1060+
1061+
``` js
1062+
const Child = {
1063+
inject: {
1064+
foo: { default: 'foo' }
1065+
}
1066+
}
1067+
```
1068+
1069+
如果它需要从一个不同名字的属性注入，则使用 `from` 来表示其源属性：
1070+
1071+
``` js
1072+
const Child = {
1073+
inject: {
1074+
foo: {
1075+
from: 'bar',
1076+
default: 'foo'
1077+
}
1078+
}
1079+
}
1080+
```
1081+
1082+
对于 prop 的默认值来说是类似的，你需要对非原始值使用一个工厂方法：
1083+
1084+
``` js
1085+
const Child = {
1086+
inject: {
1087+
foo: {
1088+
from: 'bar',
1089+
default: () => [1, 2, 3]
1090+
}
1091+
}
1092+
}
1093+
```
1094+
10271095
## 选项 / 其它
10281096
10291097
### name

‎src/v2/examples/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ order: 0
66

77
> 蠢萌的 Markdown 编辑器。
88
9-
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/rdjjpc7a/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
9+
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/0dzvcf4d/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/guide/class-and-style.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ data: {
105105
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
106106
```
107107

108-
这样写将始终添加 `errorClass`，但是只有在 `isActive` 是 `true` 时才添加 `activeClass`。
108+
这样写将始终添加 `errorClass`，但是只有在 `isActive` 是 [truthy](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy) 时才添加 `activeClass`。
109109

110110
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
111111

‎src/v2/guide/comparison.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -223,9 +223,7 @@ Polymer 自定义的元素是用 HTML 文件来创建的，这会限制使用 Ja
223223

224224
## Riot
225225

226-
Riot 2.0 提供了一个类似于基于组件的开发模型 (在 Riot 中称之为 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在设计理念上可能有许多相似处。尽管相比 Riot ，Vue 要显得重一点，Vue 还是有很多显著优势的：
226+
Riot 3.0 提供了一个类似于基于组件的开发模型 (在 Riot 中称之为 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在设计理念上可能有许多相似处。尽管相比 Riot ，Vue 要显得重一点，Vue 还是有很多显著优势的：
227227

228-
- [过渡效果系统](transitions.html)。Riot 现在还没有提供。
229-
- 功能更加强大的路由机制，Riot 的路由功能的 API 是极少的。
230228
- 更好的性能。Riot 使用了 [遍历 DOM 树](http://riotjs.com/compare/#virtual-dom-vs-expressions-binding) 而不是虚拟 DOM，但实际上用的还是脏检查机制，因此和 AngularJS 患有相同的性能问题。
231229
- 更多成熟工具的支持。Vue 提供官方支持 [webpack](https://github.com/vuejs/vue-loader) 和 [Browserify](https://github.com/vuejs/vueify)，而 Riot 是依靠社区来建立集成系统。

‎src/v2/guide/components.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -999,9 +999,9 @@ Vue.component('child-component', {
999999
``` html
10001000
<my-awesome-list :items="items">
10011001
 <!-- 作用域插槽也可以是具名的 -->
1002-
<li
1003-
slot="item"
1004-
slot-scope="props"
1002+
<li
1003+
slot="item"
1004+
slot-scope="props"
10051005
class="my-fancy-item">
10061006
{{ props.text }}
10071007
</li>
@@ -1162,6 +1162,7 @@ Vue.component('async-webpack-example', function (resolve) {
11621162
``` js
11631163
Vue.component(
11641164
'async-webpack-example',
1165+
// 该 `import` 函数返回一个 `Promise` 对象。
11651166
() => import('./my-async-component')
11661167
)
11671168
```

‎src/v2/guide/conditional.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ new Vue({
182182

183183
不同的是带有 `v-show` 的元素始终会被渲染并保留在 DOM 中。`v-show` 只是简单地切换元素的 CSS 属性 `display`。
184184

185-
<p class="tip">注意，`v-show` 不支持 `<template>` 语法，也不支持 `v-else`。</p>
185+
<p class="tip">注意，`v-show` 不支持 `<template>` 元素，也不支持 `v-else`。</p>
186186

187187
## `v-if` vs `v-show`
188188

‎src/v2/guide/custom-directive.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,10 @@ Vue.directive('focus', {
4242
``` js
4343
directives: {
4444
focus: {
45-
// 指令的定义---
46-
inserted: function (el) {}
45+
// 指令的定义
46+
inserted: function (el) {
47+
el.focus()
48+
}
4749
}
4850
}
4951
```

‎src/v2/guide/deployment.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,22 @@ module.exports = {
5050
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
5151
```
5252

53+
- 或者在 Gulp 中使用 [envify](https://github.com/hughsk/envify)：
54+
55+
``` js
56+
// 使用 envify 自定义模块来定制环境变量
57+
var envify = require('envify/custom')
58+
59+
browserify(browserifyOptions)
60+
.transform(vueify),
61+
.transform(
62+
// 必填项，以处理 node_modules 里的文件
63+
{ global: true },
64+
envify({ NODE_ENV: 'production' })
65+
)
66+
.bundle()
67+
```
68+
5369
#### Rollup
5470

5571
使用 [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace)：

‎src/v2/guide/installation.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
title: 安装
33
type: guide
44
order: 1
5-
vue_version: 2.4.4
6-
dev_size: "262.63"
7-
min_size: "80.76"
8-
gz_size: "29.35"
9-
ro_gz_size: "20.60"
5+
vue_version: 2.5.1
6+
dev_size: "271.12"
7+
min_size: "83.13"
8+
gz_size: "30.33"
9+
ro_gz_size: "21.04"
1010
---
1111

1212
### 兼容性

‎src/v2/guide/instance.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ new Vue({
117117

118118
也有一些其它的钩子，在实例生命周期的不同场景下调用，如 [`mounted`](../api/#mounted)、[`updated`](../api/#updated)、[`destroyed`](../api/#destroyed)。钩子的 `this` 指向调用它的 Vue 实例。
119119

120-
<p class="tip">不要在选项属性或回调上使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，比如 `created: () => console.log(this.a)` 或 `vm.$watch('a', newValue => this.myMethod())`。因为箭头函数是和父级上下文绑定在一起的，`this` 不会是如你所预期的 Vue 实例，且 `this.a` 或 `this.myMethod` 也会是未定义的。</p>
120+
<p class="tip">不要在选项属性或回调上使用[箭头函数](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，比如 `created: () => console.log(this.a)` 或 `vm.$watch('a', newValue => this.myMethod())`。因为箭头函数是和父级上下文绑定在一起的，`this` 不会是如你所预期的 Vue 实例，经常导致 `Uncaught TypeError: Cannot read property of undefined` 或 `Uncaught TypeError: this.myMethod is not a function` 之类的错误。</p>
121121

122122
## 生命周期图示
123123

‎src/v2/guide/single-file-components.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ order: 402
1515
- **不支持 CSS (No CSS support)** 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
1616
- **没有构建步骤 (No build step)** 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
1717

18-
文件扩展名为 `.vue` 的 **single-file components(单文件组件)** 为以上所有问题提供了解决方法，并且还可以使用 Webpack 或 Browserify 等构建工具。
18+
文件扩展名为 `.vue` 的 **single-file components(单文件组件)** 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
1919

2020
这是一个文件名为 `Hello.vue` 的简单实例：
2121

@@ -31,7 +31,7 @@ order: 402
3131

3232
<img src="/images/vue-component-with-preprocessors.png" style="display: block; margin: 30px auto;">
3333

34-
这些特定的语言只是例子，你可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 `vue-loader` 使用 Webpack，它也是把 CSS Modules 当作第一公民来对待的。
34+
这些特定的语言只是例子，你可以只是简单地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能够帮助你提高生产力的预处理器。如果搭配 `vue-loader` 使用 webpack，它也是把 CSS Modules 当作第一公民来对待的。
3535

3636
### 怎么看待关注点分离？
3737

@@ -50,6 +50,10 @@ order: 402
5050

5151
## 起步
5252

53+
### 例子沙箱
54+
55+
如果你希望深入了解并开始使用单文件组件，请来 CodeSandbox [看看这个简单的 todo 应用](https://codesandbox.io/s/o29j95wx9)。
56+
5357
### 针对刚接触 JavaScript 模块开发系统的用户
5458

5559
有了 `.vue` 组件，我们就进入了高级 JavaScript 应用领域。如果你没有准备好的话，意味着还需要学会使用一些附加的工具：
@@ -58,14 +62,12 @@ order: 402
5862

5963
- **Modern JavaScript with ES2015/16**：阅读 Babel 的 [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/)。你不需要立刻记住每一个方法，但是你可以保留这个页面以便后期参考。
6064

61-
在你花一些时日了解这些资源之后，我们建议你参考 [webpack-simple](https://github.com/vuejs-templates/webpack-simple)。只要遵循指示，你就能很快地运行一个用到 `.vue` 组件，ES2015 和 热重载 (hot-reloading) 的 Vue 项目!
62-
63-
这个模板使用 [Webpack](https://webpack.github.io/)，一个能将多个模块打包成最终应用的模块打包工具。想学习更多 Webpack 的知识，请移步[它们的官方文档](https://webpack.js.org/configuration/)以及 [Webpack Academy](https://webpack.academy/p/the-core-concepts)。
65+
在你花一天时间了解这些资源之后，我们建议你参考 [webpack](https://github.com/vuejs-templates/webpack) 模板。只要遵循指示，你就能很快地运行一个用到 `.vue` 组件，ES2015 和热重载 (hot-reloading) 的 Vue 项目!
6466

65-
在 Webpack 中，每个模块被打包到 bundle 之前都由一个相应的 "loader" 来转换，Vue 也提供 [vue-loader](https://github.com/vuejs/vue-loader) 插件来执行 `.vue` 单文件组件 的转换。这个 [webpack-simple](https://github.com/vuejs-templates/webpack-simple) 模板已经为你准备好了所有的东西，但是如果你想了解更多关于 `.vue` 组件和 Webpack 如何一起运转的信息，你可以阅读 [vue-loader 的文档](https://vue-loader.vuejs.org)。
67+
想学习更多 webpack 的知识，请移步[它们的官方文档](https://webpack.js.org/configuration/)以及 [webpack learning academy](https://webpack.academy/p/the-core-concepts)。在 webpack 中，每个模块被打包到 bundle 之前都由一个相应的“loader”来转换，Vue 也提供 [vue-loader](https://github.com/vuejs/vue-loader) 插件来执行 `.vue` 单文件组件 的转换。
6668

6769
### 针对高级用户
6870

69-
无论你更钟情 Webpack 或是 Browserify，我们为简单的和更复杂的项目都提供了一些文档模板。我们建议浏览 [github.com/vuejs-templates](https://github.com/vuejs-templates)，找到你需要的部分，然后参考 README 中的说明，使用 [vue-cli](https://github.com/vuejs/vue-cli) 工具生成新的项目。
71+
无论你更钟情 webpack 或是 Browserify，我们为简单的和更复杂的项目都提供了一些文档模板。我们建议浏览 [github.com/vuejs-templates](https://github.com/vuejs-templates)，找到你需要的部分，然后参考 README 中的说明，使用 [vue-cli](https://github.com/vuejs/vue-cli) 工具生成新的项目。
7072

71-
模板中使用 [Webpack](https://webpack.js.org/)，一个模块加载器加载多个模块然后构建成最终应用。为了进一步了解 Webpack，可以看 [官方介绍视频](https://www.youtube.com/watch?v=WQue1AN93YU)。如果你有基础，可以看 [在 Egghead.io 上的 Webpack 进阶教程](https://egghead.io/courses/using-webpack-for-production-javascript-applications)。
73+
模板中使用 [webpack](https://webpack.js.org/)，一个模块加载器加载多个模块然后构建成最终应用。为了进一步了解 webpack，可以看 [官方介绍视频](https://www.youtube.com/watch?v=WQue1AN93YU)。如果你有基础，可以看 [在 Egghead.io 上的 webpack 进阶教程](https://egghead.io/courses/using-webpack-for-production-javascript-applications)。

‎src/v2/guide/syntax.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -95,15 +95,15 @@ Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 [
9595
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，`v-bind` 指令可以用于响应式地更新 HTML 属性：
9696

9797
``` html
98-
<a v-bind:href="url"></a>
98+
<a v-bind:href="url">...</a>
9999
```
100100

101101
在这里 `href` 是参数，告知 `v-bind` 指令将该元素的 `href` 属性与表达式 `url` 的值绑定。
102102

103103
另一个例子是 `v-on` 指令，它用于监听 DOM 事件：
104104

105105
``` html
106-
<a v-on:click="doSomething">
106+
<a v-on:click="doSomething">...</a>
107107
```
108108

109109
在这里参数是监听的事件名。我们也会更详细地讨论事件处理。
@@ -113,7 +113,7 @@ Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 [
113113
修饰符 (Modifiers) 是以半角句号 `.` 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，`.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()`：
114114

115115
``` html
116-
<form v-on:submit.prevent="onSubmit"></form>
116+
<form v-on:submit.prevent="onSubmit">...</form>
117117
```
118118

119119
在接下来对 [`v-on`](events.html#事件修饰符) 和 [`v-for`](forms.html#修饰符) 等功能的探索中，你会看到修饰符的其它例子。
@@ -126,20 +126,20 @@ Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 [
126126

127127
``` html
128128
<!-- 完整语法 -->
129-
<a v-bind:href="url"></a>
129+
<a v-bind:href="url">...</a>
130130

131131
<!-- 缩写 -->
132-
<a :href="url"></a>
132+
<a :href="url">...</a>
133133
```
134134

135135
### `v-on` 缩写
136136

137137
``` html
138138
<!-- 完整语法 -->
139-
<a v-on:click="doSomething"></a>
139+
<a v-on:click="doSomething">...</a>
140140

141141
<!-- 缩写 -->
142-
<a @click="doSomething"></a>
142+
<a @click="doSomething">...</a>
143143
```
144144

145145
它们看起来可能与普通的 HTML 略有不同，但 `:` 与 `@` 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

0 commit comments

Comments
 (0)