@@ -20,7 +20,7 @@ vm.b = 2
20
20
// `vm.b` 不是响应式的
21
21
```
22
22
23
- 对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 ` Vue.set(object, propertyName, value) ` 方法向嵌套对象添加响应式 property:
23
+ 对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 ` Vue.set(object, propertyName, value) ` 方法向嵌套对象添加响应式 property:
24
24
25
25
``` js
26
26
Vue .set (vm .someObject , ' b' , 2 )
@@ -58,7 +58,7 @@ vm.items[1] = 'x' // 不是响应式的
58
58
vm .items .length = 2 // 不是响应式的
59
59
```
60
60
61
- 为了解决第一种问题,以下两种方式都可以实现和 ` vm.items[indexOfItem] = newValue ` 相同的效果,同时也将在响应性系统内触发状态更新 :
61
+ 为了解决第一种问题,以下两种方式都可以实现和 ` vm.items[indexOfItem] = newValue ` 相同的效果,同时也会触发响应性系统的状态更新 :
62
62
63
63
``` js
64
64
// Vue.set
@@ -70,7 +70,7 @@ Vue.set(vm.items, indexOfItem, newValue)
70
70
vm .items .splice (indexOfItem, 1 , newValue)
71
71
```
72
72
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 ` 的一个别名:
74
74
75
75
``` js
76
76
vm .$set (vm .items , indexOfItem, newValue)
@@ -100,13 +100,13 @@ vm.message = 'Hello!'
100
100
101
101
如果你未在 data 选项中声明 ` message ` ,Vue 将警告你渲染函数正在试图访问不存在的 property。
102
102
103
- 这样的限制在背后是有其技术原因的,它消除了在依赖项跟踪系统中的一类边界情况 ,也使组件实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑:` data ` 对象就像组件的状态结构 (schema)。提前声明所有的响应式 property,可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。
103
+ 这样的限制在背后是有其技术原因的,它消除了在依赖追踪系统中的一类边界情况 ,也使组件实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑:` data ` 对象就像组件的状态结构 (schema)。提前声明所有的响应式 property,可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。
104
104
105
105
## 异步更新队列
106
106
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) ` 代替。
108
108
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 更新完成后被调用。例如:
110
110
111
111
``` html
112
112
<div id =" example" >{{ message }}</div >
0 commit comments