Skip to content

Commit 086678c

Browse files
UnderwaternyaUnderwaternya
authored
Merge branch 'master' into patch-1
2 parents 6a79241 + 7630ef2 commit 086678c

File tree

8 files changed

+102
-97
lines changed

8 files changed

+102
-97
lines changed

‎src/v2/api/index.md

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ type: api
7777

7878
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。
7979

80-
> [Sentry](https://sentry.io), an error tracking service, provides [official integration](https://sentry.io/for/vue/) using this option.
80+
> [Sentry](https://sentry.io), 一个错误追踪服务, 通过此选项提供[官方集成](https://sentry.io/for/vue/)。
8181
8282
### ignoredElements
8383

@@ -563,7 +563,11 @@ type: api
563563

564564
<p class="tip"> 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载root实例到 `<html>` 或者 `<body>` 上。</p>
565565

566-
- **参考：** [生命周期图示](../guide/instance.html#生命周期图示)
566+
<p class="tip">如果 `render` 函数和 `template` 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库。</p>
567+
568+
- **参考：**
569+
- [生命周期图示](../guide/instance.html#生命周期图示)
570+
- [独立构建-vs-运行时构建](../guide/installation.html#独立构建-vs-运行时构建)
567571

568572
### template
569573

@@ -577,6 +581,8 @@ type: api
577581

578582
<p class="tip">出于安全考虑，您应该只使用您信任的 Vue 模板。避免使用其他人生成的内容作为您的模板。</p>
579583

584+
<p class="tip">如果 Vue 选项中包含 render 函数，template 选项将被忽略。</p>
585+
580586
- **参考：**
581587
- [生命周期图示](../guide/instance.html#生命周期图示)
582588
- [内容分发](../guide/components.html#使用-Slot-分发内容)
@@ -591,6 +597,8 @@ type: api
591597

592598
如果组件是一个函数组件，Render 函数还会接收一个额外的 `context` 参数，为没有实例的函数组件提供上下文信息。
593599

600+
<p class="tip">Vue 选项中的 `render` 函数若存在，则 Vue 构造函数不会从 `template` 选项或通过 `el` 选项指定的挂载元素中提取出的 HTML 模板编译 render 函数。</p>
601+
594602
- **参考：**
595603
- [Render 函数](../guide/render-function.html)
596604

@@ -994,9 +1002,9 @@ type: api
9941002

9951003
- **详细：**
9961004

997-
Used to programmatically access [scoped slots](../guide/components.html#Scoped-Slots). For each slot, including the `default` one, the object contains a corresponding function that returns VNodes.
998-
999-
Accessing `vm.$scopedSlots` is most useful when writing a component with a [render function](../guide/render-function.html).
1005+
用来访问 [scoped slots](../guide/components.html#Scoped-Slots)。对于包括 `默认 slot` 在内的每一个 slot， 该对象都包含一个返回相应 VNode 的函数。
1006+
1007+
在使用 [render 函数](../guide/render-function.html) 书写一个组件时，访问 `vm.$scopedSlots` 最有帮助。
10001008

10011009
- **参考：**
10021010
- [`<slot>` 组件](#slot-1)
@@ -1365,13 +1373,13 @@ type: api
13651373

13661374
> 2.1.0新增
13671375
1368-
- **Expects:** `any`
1376+
- **类型:** `any`
13691377

1370-
- **Restriction:** previous sibling element must have `v-if` or `v-else-if`.
1378+
- **限制:** 前一兄弟元素必须有 `v-if` 或 `v-else-if`。
13711379

1372-
- **Usage:**
1380+
- **用法:**
13731381

1374-
Denote the "else if block" for `v-if`. Can be chained.
1382+
表示 `v-if` 的 "else if 块"。可以链式调用。
13751383

13761384
```html
13771385
<div v-if="type === 'A'">
@@ -1388,7 +1396,7 @@ type: api
13881396
</div>
13891397
```
13901398

1391-
- **See also:** [条件渲染 - v-else-if](../guide/conditional.html#v-else-if)
1399+
- **参考:** [条件渲染 - v-else-if](../guide/conditional.html#v-else-if)
13921400

13931401
### v-for
13941402

@@ -1553,13 +1561,13 @@ type: api
15531561
<svg><a :xlink:special="foo"></a></svg>
15541562
```
15551563

1556-
The `.camel` modifier allows camelizing a `v-bind` attribute name when using in-DOM templates, e.g. the SVG `viewBox` attribute:
1564+
`.camel` 修饰符允许在使用 DOM 模板时将 `v-bind` 属性名称驼峰化，例如 SVG 的 `viewBox` 属性：
15571565

15581566
``` html
15591567
<svg :view-box.camel="viewBox"></svg>
15601568
```
15611569

1562-
`.camel` is not needed if you are using string templates, or compiling with `vue-loader`/`vueify`.
1570+
在使用字符串模板或通过 `vue-loader`/`vueify` 编译时，无需使用 `.camel`。
15631571

15641572
- **参考：**
15651573
- [Class 与 Style 绑定](../guide/class-and-style.html)
@@ -1833,8 +1841,8 @@ type: api
18331841
### keep-alive
18341842

18351843
- **Props:**
1836-
- `include` - string or RegExp. Only components matched by this will be cached.
1837-
- `exclude` - string or RegExp. Any component matched by this will not be cached.
1844+
- `include` - 字符串或正则表达式。只有匹配的组件会被缓存。
1845+
- `exclude` - 字符串或正则表达式。任何匹配的组件都不会被缓存。
18381846

18391847
- **用法：**
18401848

@@ -1866,23 +1874,23 @@ type: api
18661874

18671875
- **`include` and `exclude`**
18681876

1869-
> New in 2.1.0
1877+
> 2.1.0 新增
18701878
1871-
The `include` and `exclude` props allow components to be conditionally cached. Both props can either be a comma-delimited string or a RegExp:
1879+
`include` 和 `exclude` 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串或正则表达式来表示:
18721880

18731881
``` html
1874-
<!-- comma-delimited string -->
1882+
<!-- 逗号分隔字符串 -->
18751883
<keep-alive include="a,b">
18761884
<component :is="view"></component>
18771885
</keep-alive>
18781886

1879-
<!-- regex (use v-bind) -->
1887+
<!-- 正则表达式 (使用 v-bind) -->
18801888
<keep-alive :include="/a|b/">
18811889
<component :is="view"></component>
18821890
</keep-alive>
18831891
```
18841892

1885-
The match is first checked on the component's own `name` option, then its local registration name (the key in the parent's `components` option) if the `name` option is not available. Anonymous components cannot be matched against.
1893+
匹配首先检查组件自身的 `name` 选项，如果 `name` 选项不可用，则匹配它的局部注册名称（父组件 `components` 选项的键值）。匿名组件不能被匹配。
18861894

18871895
<p class="tip">`<keep-alive>` 不会在函数式组件中正常工作，因为它们没有缓存实例。</p>
18881896

‎src/v2/guide/computed.md

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ console.log(vm.reversedMessage) // -> 'eybdooG'
8282

8383
### 计算缓存 vs Methods
8484

85-
你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果：
85+
你可能已经注意到我们可以通过调用表达式中的 method 来达到同样的效果：
8686

8787
``` html
8888
<p>Reversed message: "{{ reversedMessage() }}"</p>
@@ -97,9 +97,9 @@ methods: {
9797
}
9898
```
9999

100-
不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。然而，不同的是**计算属性是基于它的依赖缓存**。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 `message` 没有发生改变，多次访问 `reversedMessage` 计算属性会立即返回之前的计算结果，而不必再次执行函数。
100+
我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是**计算属性是基于它们的依赖进行缓存的**。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 `message` 还没有发生改变，多次访问 `reversedMessage` 计算属性会立即返回之前的计算结果，而不必再次执行函数。
101101

102-
这也同样意味着如下计算属性将不会更新，因为 `Date.now()` 不是响应式依赖：
102+
这也同样意味着下面的计算属性将不再更新，因为 `Date.now()` 不是响应式依赖：
103103

104104
``` js
105105
computed: {
@@ -109,13 +109,12 @@ computed: {
109109
}
110110
```
111111

112-
相比而言，每当重新渲染的时候，method 调用**总会**执行函数。
112+
相比而言，只要发生重新渲染，method 调用**总会**执行该函数。
113113

114-
我们为什么需要缓存？假设我们有一个重要的计算属性 **A** ，这个计算属性需要一个巨大的数组遍历和做大量的计算。然后我们可能有其他的计算属性依赖于 **A** 。如果没有缓存，我们将不可避免的多次执行 **A** 的 getter ！如果你不希望有缓存，请用 method 替代。
114+
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 **A** ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 **A** 。如果没有缓存，我们将不可避免的多次执行 **A** 的 getter！如果你不希望有缓存，请用 method 替代。
115115

116-
### 计算属性 vs Watched Property
117-
118-
Vue.js 提供了一个方法 `$watch` ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， `$watch` 很诱人 —— 特别是如果你来自 AngularJS 。不过，通常更好的办法是使用计算属性而不是一个命令式的 `$watch` 回调。思考下面例子：
116+
### Computed 属性 vs Watched 属性
117+
Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 `watch`——特别是如果你之前使用过 AngularJS。然而，通常更好的想法是使用 computed 属性而不是命令式的 `watch` 回调。细想一下这个例子：
119118

120119
``` html
121120
<div id="demo">{{ fullName }}</div>
@@ -140,7 +139,7 @@ var vm = new Vue({
140139
})
141140
```
142141

143-
上面代码是命令式的和重复的。跟计算属性对比：
142+
上面代码是命令式的和重复的。将它与 computed 属性的版本进行比较：
144143

145144
``` js
146145
var vm = new Vue({
@@ -157,7 +156,7 @@ var vm = new Vue({
157156
})
158157
```
159158

160-
这样更好，不是吗？
159+
好得多了，不是吗？
161160

162161
### 计算 setter
163162

@@ -182,7 +181,7 @@ computed: {
182181
// ...
183182
```
184183

185-
现在在运行 `vm.fullName = 'John Doe'` 时， setter 会被调用， `vm.firstName` 和 `vm.lastName` 也会被对应更新。
184+
现在在运行 `vm.fullName = 'John Doe'` 时， setter 会被调用， `vm.firstName` 和 `vm.lastName` 也相应地会被更新。
186185

187186
## 观察 Watchers
188187

0 commit comments

Comments
 (0)