Skip to content

Commit 2ccacb8

Browse files
committed
fixed all linting errors
1 parent 2ece555 commit 2ccacb8

16 files changed

+52
-52
lines changed

src/v2/api/index.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -415,7 +415,7 @@ type: api
415415

416416
让一个对象可响应。Vue 内部会用它来处理 `data` 函数返回的对象。
417417

418-
返回的对象可以直接用于[渲染函数](../guide/render-function.html) [计算属性](../guide/computed.html) 内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:
418+
返回的对象可以直接用于[渲染函数](../guide/render-function.html)[计算属性](../guide/computed.html)内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:
419419

420420
``` js
421421
const state = Vue.observable({ count: 0 })
@@ -577,17 +577,17 @@ type: api
577577

578578
- **详细**
579579

580-
计算属性 将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
580+
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
581581

582-
注意如果你为一个 计算属性 使用了箭头函数,则 `this` 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
582+
注意如果你为一个计算属性使用了箭头函数,则 `this` 不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
583583

584584
```js
585585
computed: {
586586
aDouble: vm => vm.a * 2
587587
}
588588
```
589589

590-
 计算属性 的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则 计算属性 是**不会**被更新的。
590+
 计算属性的结果会被缓存,除非依赖的响应式 property 变化才会重新计算。注意,如果某个依赖 (比如非响应式 property) 在该实例范畴之外,则计算属性是**不会**被更新的。
591591

592592
- **示例**
593593

@@ -866,7 +866,7 @@ type: api
866866
867867
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
868868
869-
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用 [计算属性](#computed) 或 [watcher](#watch) 取而代之。
869+
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用[计算属性](#computed)或 [watcher](#watch) 取而代之。
870870
871871
注意 `updated` **不会**保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以在 `updated` 里使用 [vm.$nextTick](#vm-nextTick):
872872

src/v2/cookbook/adding-instance-properties.md

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

3131
> “为什么 `appName` 要以 `$` 开头?这很重要吗?它会怎样?”
3232
33-
这里没有什么魔法。`$` 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性 产生冲突
33+
这里没有什么魔法。`$` 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突
3434

3535
> “你指的冲突是什么意思?”
3636

src/v2/cookbook/form-validation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ const app = new Vue({
323323
})
324324
```
325325

326-
我们将总和设置为了一个 计算属性,从那个我们解决掉的 bug 外面看上去,这已经足够了。我的 `checkForm` 方法现在只需要关注总和是不是 100 了。你可以在这里试用:
326+
我们将总和设置为了一个计算属性,从那个我们解决掉的 bug 外面看上去,这已经足够了。我的 `checkForm` 方法现在只需要关注总和是不是 100 了。你可以在这里试用:
327327

328328
<p data-height="265" data-theme-id="0" data-slug-hash="vWqGoy" data-default-tab="html,result" data-user="cfjedimaster" data-embed-version="2" data-pen-title="form validation 3" class="codepen">在 <a href="https://codepen.io">CodePen</a> 查看 Raymond Camden (<a href="https://codepen.io/cfjedimaster">@cfjedimaster</a>) 的 <a href="https://codepen.io/cfjedimaster/pen/vWqGoy/">表单校验3</a>。</p>
329329
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

src/v2/cookbook/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ order: 0
1212

1313
* **更有深度**:为了避免指南写得太长,我们试着只包含了尽可能简单的示例来帮助你理解每个功能,然后就奔下一个话题了。在 cookbook 里,我们以更生动的形式包含了更复杂的示例并结合特性。每个案例都可以尽可能的翔实,以彻底探索这个领域。
1414

15-
* **传授 JavaScript**:在指南里,我们假设你至少具有 ES5 JavaScript 的中级水平。例如,我们不会解释 `Array.prototype.filter` 在 计算属性 中是如何过滤一个列表的。然而在 cookbook 里,我们将对一些必要的 JavaScript 特性 (包括 ES6/2015+) 进行探索和解释,以帮助我们构建更好的 Vue 应用。
15+
* **传授 JavaScript**:在指南里,我们假设你至少具有 ES5 JavaScript 的中级水平。例如,我们不会解释 `Array.prototype.filter` 在计算属性中是如何过滤一个列表的。然而在 cookbook 里,我们将对一些必要的 JavaScript 特性 (包括 ES6/2015+) 进行探索和解释,以帮助我们构建更好的 Vue 应用。
1616

1717
* **探索生态系统**:对于高级特性,我们会假设你已经对生态系统有一定了解。例如,如果你想在 webpack 中使用单文件组件,我们不会解释如何在 webpack 中配置 Vue 以外的部分。在 cookbook 里,我们有空间去更深度探索这些生态系统中的库——至少能到对 Vue 开发者普遍使用的程度。
1818

src/v2/cookbook/unit-testing-vue-components.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ describe('Foo', () => {
228228

229229
注意事项:
230230

231-
在一开始,工厂函数将 `values` 对象合并到了 `data` 并返回了一个新的 `wrapper` 实例。这样,我们就不需要在每个测试中重复 `const wrapper = shallowMount(Foo)`另一个好处是当你想为更复杂的组件在每个测试中伪造或存根一个方法或 计算属性 时,你只需要声明一次即可。
231+
在一开始,工厂函数将 `values` 对象合并到了 `data` 并返回了一个新的 `wrapper` 实例。这样,我们就不需要在每个测试中重复 `const wrapper = shallowMount(Foo)`另一个好处是当你想为更复杂的组件在每个测试中伪造或存根一个方法或计算属性时,你只需要声明一次即可。
232232

233233
## 额外的上下文
234234

src/v2/examples/firebase.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ type: examples
44
order: 10
55
---
66

7-
> 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端,同时在客户端进行数据实时同步 (你可以在多个浏览器窗口去打开它来验证)。另外,它通过 计算属性 实时验证,并且添加/移除选项时触发 CSS 过渡。
7+
> 本示例使用 [Firebase](https://firebase.google.com/) 作为数据存储后端,同时在客户端进行数据实时同步 (你可以在多个浏览器窗口去打开它来验证)。另外,它通过计算属性实时验证,并且添加/移除选项时触发 CSS 过渡。
88
99
<iframe src="https://codesandbox.io/embed/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-firebase-validation?codemirror=1&hidedevtools=1&hidenavigation=1&theme=light" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="vue-20-template-compilation" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ data: {
6060
}
6161
```
6262

63-
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的 [计算属性](computed.html)。这是一个常用且强大的模式:
63+
渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的[计算属性](computed.html)。这是一个常用且强大的模式:
6464

6565
``` html
6666
<div v-bind:class="classObject"></div>
@@ -187,7 +187,7 @@ data: {
187187
}
188188
```
189189

190-
同样的,对象语法常常结合返回对象的 计算属性 使用
190+
同样的,对象语法常常结合返回对象的计算属性使用
191191

192192
### 数组语法
193193

src/v2/guide/comparison.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@ Ember 是一个全能框架。它提供了大量的约定,一旦你熟悉了
202202

203203
也就是说,我们最好比较的是 Vue 内核和 Ember 的[模板](https://guides.emberjs.com/v2.10.0/templates/handlebars-basics/)[数据模型](https://guides.emberjs.com/v2.10.0/object-model/)层:
204204

205-
* Vue 在普通 JavaScript 对象上建立响应,提供自动化的 计算属性。在 Ember 中需要将所有东西放在 Ember 对象内,并且手工为 计算属性 声明依赖
205+
* Vue 在普通 JavaScript 对象上建立响应,提供自动化的计算属性。在 Ember 中需要将所有东西放在 Ember 对象内,并且手工为计算属性声明依赖
206206

207207
* Vue 的模板语法可以用全功能的 JavaScript 表达式,而 Handlebars 的语法和帮助函数相比来说非常受限。
208208

src/v2/guide/components-custom-events.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ Vue.component('base-checkbox', {
9292
}
9393
```
9494

95-
有了这个 `$listeners` property,你就可以配合 `v-on="$listeners"` 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 `<input>` 的你希望它也可以配合 `v-model` 工作的组件来说,为这些监听器创建一个类似下述 `inputListeners` 的 计算属性 通常是非常有用的
95+
有了这个 `$listeners` property,你就可以配合 `v-on="$listeners"` 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 `<input>` 的你希望它也可以配合 `v-model` 工作的组件来说,为这些监听器创建一个类似下述 `inputListeners` 的计算属性通常是非常有用的
9696

9797
```js
9898
Vue.component('base-input', {

src/v2/guide/components-props.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ post: {
168168
}
169169
```
170170

171-
2. **这个 prop 以一种原始的值传入且需要进行转换。**在这种情况下,最好使用这个 prop 的值来定义一个 计算属性
171+
2. **这个 prop 以一种原始的值传入且需要进行转换。**在这种情况下,最好使用这个 prop 的值来定义一个计算属性
172172

173173
``` js
174174
props: ['size'],

src/v2/guide/computed.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ order: 5
1616

1717
在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 `message` 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。
1818

19-
所以,对于任何复杂逻辑,你都应当使用 **计算属性**
19+
所以,对于任何复杂逻辑,你都应当使用**计算属性**
2020

2121
### 基础例子
2222

@@ -65,7 +65,7 @@ var vm = new Vue({
6565
</script>
6666
{% endraw %}
6767

68-
这里我们声明了一个 计算属性 `reversedMessage`。我们提供的函数将用作 property `vm.reversedMessage` 的 getter 函数:
68+
这里我们声明了一个计算属性 `reversedMessage`。我们提供的函数将用作 property `vm.reversedMessage` 的 getter 函数:
6969

7070
``` js
7171
console.log(vm.reversedMessage) // => 'olleH'
@@ -75,9 +75,9 @@ console.log(vm.reversedMessage) // => 'eybdooG'
7575

7676
你可以打开浏览器的控制台,自行修改例子中的 vm。`vm.reversedMessage` 的值始终取决于 `vm.message` 的值。
7777

78-
你可以像绑定普通 property 一样在模板中绑定 计算属性。Vue 知道 `vm.reversedMessage` 依赖于 `vm.message`,因此当 `vm.message` 发生改变时,所有依赖 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性 的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解。
78+
你可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 `vm.reversedMessage` 依赖于 `vm.message`,因此当 `vm.message` 发生改变时,所有依赖 `vm.reversedMessage` 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系:计算属性的 getter 函数是没有副作用 (side effect) 的,这使它更易于测试和理解。
7979

80-
### 计算属性 缓存 vs 方法
80+
### 计算属性缓存 vs 方法
8181

8282
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果:
8383

@@ -94,9 +94,9 @@ methods: {
9494
}
9595
```
9696

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

99-
这也同样意味着下面的 计算属性 将不再更新,因为 `Date.now()` 不是响应式依赖:
99+
这也同样意味着下面的计算属性将不再更新,因为 `Date.now()` 不是响应式依赖:
100100

101101
``` js
102102
computed: {
@@ -108,11 +108,11 @@ computed: {
108108

109109
相比之下,每当触发重新渲染时,调用方法将**总会**再次执行函数。
110110

111-
我们为什么需要缓存?假设我们有一个性能开销比较大的 计算属性 **A**,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的 计算属性 依赖于 **A**。如果没有缓存,我们将不可避免的多次执行 **A** 的 getter!如果你不希望有缓存,请用方法来替代。
111+
我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 **A**,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 **A**。如果没有缓存,我们将不可避免的多次执行 **A** 的 getter!如果你不希望有缓存,请用方法来替代。
112112

113113
### 计算属性 vs 侦听 property
114114

115-
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:**侦听 property**。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 `watch`——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用 计算属性 而不是命令式的 `watch` 回调。细想一下这个例子:
115+
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:**侦听 property**。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 `watch`——特别是如果你之前使用过 AngularJS。然而,通常更好的做法是使用计算属性而不是命令式的 `watch` 回调。细想一下这个例子:
116116

117117
``` html
118118
<div id="demo">{{ fullName }}</div>
@@ -137,7 +137,7 @@ var vm = new Vue({
137137
})
138138
```
139139

140-
上面代码是命令式且重复的。将它与 计算属性 的版本进行比较
140+
上面代码是命令式且重复的。将它与计算属性的版本进行比较
141141

142142
``` js
143143
var vm = new Vue({
@@ -156,9 +156,9 @@ var vm = new Vue({
156156

157157
好得多了,不是吗?
158158

159-
### 计算属性 的 setter
159+
### 计算属性的 setter
160160

161-
计算属性 默认只有 getter,不过在需要时你也可以提供一个 setter:
161+
计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:
162162

163163
``` js
164164
// ...
@@ -183,7 +183,7 @@ computed: {
183183

184184
## 侦听器
185185

186-
虽然 计算属性 在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 `watch` 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
186+
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 `watch` 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
187187

188188
例如:
189189

@@ -294,6 +294,6 @@ var watchExampleVM = new Vue({
294294
</script>
295295
{% endraw %}
296296

297-
在这个示例中,使用 `watch` 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是 计算属性 无法做到的
297+
在这个示例中,使用 `watch` 选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的
298298

299299
除了 `watch` 选项之外,您还可以使用命令式的 [vm.$watch API](../api/#vm-watch)

src/v2/guide/list.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ example1.items = example1.items.filter(function (item) {
273273

274274
## 显示过滤/排序后的结果
275275

276-
有时,我们想要显示一个数组经过过滤或排序后的版本,而不实际改变或重置原始数据。在这种情况下,可以创建一个 计算属性,来返回过滤或排序后的数组。
276+
有时,我们想要显示一个数组经过过滤或排序后的版本,而不实际改变或重置原始数据。在这种情况下,可以创建一个计算属性,来返回过滤或排序后的数组。
277277

278278
例如:
279279

@@ -294,7 +294,7 @@ computed: {
294294
}
295295
```
296296

297-
在 计算属性 不适用的情况下 (例如,在嵌套 `v-for` 循环中) 你可以使用一个方法:
297+
在计算属性不适用的情况下 (例如,在嵌套 `v-for` 循环中) 你可以使用一个方法:
298298

299299
```html
300300
<ul v-for="set in sets">

src/v2/guide/migration-vue-router.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ if (route.meta.requiresAuth) {
262262

263263
### URL 中的 Query 数组 [] 语法<sup>移除</sup>
264264

265-
当传递数组给 query 参数时,URL 语法不再是 `/foo?users[]=Tom&users[]=Jerry`,取而代之,新语法是 `/foo?users=Tom&users=Jerry`,此时 `$route.query.users` 将仍旧是一个数组,不过如果在该 query 中只有一个参数:`/foo?users=Tom`,当直接访问该路由时,vue-router 将无法知道我们期待的 `users` 是个数组。因此,可以考虑添加一个 计算属性 并且在每个使用 `$route.query.users` 的地方以该 计算属性 代替
265+
当传递数组给 query 参数时,URL 语法不再是 `/foo?users[]=Tom&users[]=Jerry`,取而代之,新语法是 `/foo?users=Tom&users=Jerry`,此时 `$route.query.users` 将仍旧是一个数组,不过如果在该 query 中只有一个参数:`/foo?users=Tom`,当直接访问该路由时,vue-router 将无法知道我们期待的 `users` 是个数组。因此,可以考虑添加一个计算属性并且在每个使用 `$route.query.users` 的地方以该计算属性代替
266266

267267
```javascript
268268
export default {

0 commit comments

Comments
 (0)