Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

Commit d8f4ed8

Browse files
committed
docs: proofread src/guide/change-detection.md
1 parent 890de34 commit d8f4ed8

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/guide/change-detection.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ vm.b = 2
2020
// `vm.b` 不是响应式的
2121
```
2222

23-
对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 `Vue.set(objectpropertyNamevalue)` 方法向嵌套对象添加响应式 property:
23+
对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 `Vue.set(object, propertyName, value)` 方法向嵌套对象添加响应式 property:
2424

2525
```js
2626
Vue.set(vm.someObject, 'b', 2)
@@ -58,7 +58,7 @@ vm.items[1] = 'x' // 不是响应式的
5858
vm.items.length = 2 // 不是响应式的
5959
```
6060

61-
为了解决第一种问题,以下两种方式都可以实现和 `vm.items[indexOfItem] = newValue` 相同的效果,同时也将在响应性系统内触发状态更新
61+
为了解决第一种问题,以下两种方式都可以实现和 `vm.items[indexOfItem] = newValue` 相同的效果,同时也会触发响应性系统的状态更新
6262

6363
```js
6464
// Vue.set
@@ -70,7 +70,7 @@ Vue.set(vm.items, indexOfItem, newValue)
7070
vm.items.splice(indexOfItem, 1, newValue)
7171
```
7272

73-
你也可以使用 [`vm.$set`](https://vuejs.org/v2/api/#vm-set) 实例方法,该方法是全局方法 `Vue.set` 的一个别名:
73+
你也可以使用 [`vm.$set`](https://cn.vuejs.org/v2/api/#vm-set) 实例方法,该方法是全局方法 `Vue.set` 的一个别名:
7474

7575
```js
7676
vm.$set(vm.items, indexOfItem, newValue)
@@ -100,13 +100,13 @@ vm.message = 'Hello!'
100100

101101
如果你未在 data 选项中声明 `message`,Vue 将警告你渲染函数正在试图访问不存在的 property。
102102

103-
这样的限制在背后是有其技术原因的,它消除了在依赖项跟踪系统中的一类边界情况,也使组件实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑:`data` 对象就像组件的状态结构 (schema)。提前声明所有的响应式 property,可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。
103+
这样的限制在背后是有其技术原因的,它消除了在依赖追踪系统中的一类边界情况,也使组件实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑:`data` 对象就像组件的状态结构 (schema)。提前声明所有的响应式 property,可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。
104104

105105
## 异步更新队列
106106

107-
可能你还没有注意到,Vue 在更新 DOM 时是**异步**执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 `Promise.then``MutationObserver``setImmediate`,如果执行环境不支持,则会采用 `setTimeout(fn, 0)` 代替。
107+
可能你还没有注意到,Vue 在更新 DOM 时是**异步**执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个侦听器被多次触发,它只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 `Promise.then``MutationObserver``setImmediate`,如果执行环境不支持,则会采用 `setTimeout(fn, 0)` 代替。
108108

109-
例如,当你设置 `vm.someData = 'new value'`,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 `Vue.nextTick(callback)`。这样回调函数将在 DOM 更新完成后被调用。例如:
109+
例如,当你设置 `vm.someData = 'new value'`,该组件不会立即重新渲染。当刷新队列时,组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程,但是如果你想基于更新后的 DOM 状态来做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考,避免直接操作 DOM,但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 `Vue.nextTick(callback)`。这样回调函数将在 DOM 更新完成后被调用。例如:
110110

111111
```html
112112
<div id="example">{{ message }}</div>

0 commit comments

Comments
 (0)