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

docs: proofread src/guide/change-detection.md #388

Merged
merged 1 commit into from
Jan 28, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/guide/change-detection.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ vm.b = 2
// `vm.b` 不是响应式的
```

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

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

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

```js
// Vue.set
Expand All @@ -70,7 +70,7 @@ Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
```

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

```js
vm.$set(vm.items, indexOfItem, newValue)
Expand Down Expand Up @@ -100,13 +100,13 @@ vm.message = 'Hello!'

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

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

## 异步更新队列

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

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

```html
<div id="example">{{ message }}</div>
Expand Down