Browse Source

错字纠正

frank 7 years ago
parent
commit
1ef5896e90
1 changed files with 11 additions and 11 deletions
  1. 11 11
      docs/art/8vue-reactive-dep-watch.md

+ 11 - 11
docs/art/8vue-reactive-dep-watch.md

@@ -101,7 +101,7 @@ if (!options.render) {
 return mount.call(this, el, hydrating)
 ```
 
-可以看到,首先定义了 `options` 常量,该常量是 `$options` 的引用,然后使用一个 `if` 语句检测否包含 `render` 选项,即是否包含渲染函数。如果渲染函数存在那么什么都不会做,直接调用运行时版 `$mount` 函数即可,我们知道运行时版 `$mount` 仅有两句代码,且真正的挂载是通过调用 `mountComponent` 函数完成的,所以可想而知 `mountComponent` 完成挂载所需的必要条件就是:**提供渲染函数给 `mountComponent`**。
+可以看到,首先定义了 `options` 常量,该常量是 `$options` 的引用,然后使用一个 `if` 语句检测否包含 `render` 选项,即是否包含渲染函数。如果渲染函数存在那么什么都不会做,直接调用运行时版 `$mount` 函数即可,我们知道运行时版 `$mount` 仅有两句代码,且真正的挂载是通过调用 `mountComponent` 函数完成的,所以可想而知 `mountComponent` 完成挂载所需的必要条件就是:**提供渲染函数给 `mountComponent`**。
 
 那么如果 `options.render` 选项不存在呢?这个时候将会执行 `if` 语句块的代码,而 `if` 语句块的代码所做的事情只有一个:**使用 `template` 或 `el` 选项构建渲染函数**。我们看看它是如何构建的,如下是 `if` 语句块的第一段代码:
 
@@ -353,7 +353,7 @@ if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 }
 ```
 
-这段代码的作用只有一个,即定义并初始化 `updateComponent` 函数,这个函数将用作创建 `Watcher` 实例时传递给 `Watcher` 构造函数的第二个参数,这也将使我们第一次真正的接触 `Watcher` 构造函数,不过现在我们需要先把 `updateComponent` 函数搞清楚,在上面的代码中首先定义了 `updateComponent` 变量,虽然是一个 `if...else` 语句块,其中 `if` 语句块的条件我们已经遇到过很多次了,在满足该添加的情况下会做一些性能统计,可以看到在 `if` 语句块中分别统计了 `vm._render()` 函数以及 `vm._update()` 函数的运行性能。也就是说无论是执行 `if` 语句块还是执行 `else` 语句块,最终 `updateComponent` 函数的功能是不变的。
+这段代码的作用只有一个,即定义并初始化 `updateComponent` 函数,这个函数将用作创建 `Watcher` 实例时传递给 `Watcher` 构造函数的第二个参数,这也将使我们第一次真正的接触 `Watcher` 构造函数,不过现在我们需要先把 `updateComponent` 函数搞清楚,在上面的代码中首先定义了 `updateComponent` 变量,虽然是一个 `if...else` 语句块,其中 `if` 语句块的条件我们已经遇到过很多次了,在满足该添加的情况下会做一些性能统计,可以看到在 `if` 语句块中分别统计了 `vm._render()` 函数以及 `vm._update()` 函数的运行性能。也就是说无论是执行 `if` 语句块还是执行 `else` 语句块,最终 `updateComponent` 函数的功能是不变的。
 
 既然功能相同,我们就直接看 `else` 语句块的代码,因为它要简洁的多:
 
@@ -496,7 +496,7 @@ if (options) {
 
 * `options.user`,用来标识当前观察者实例对象是**开发者定义的**还是**内部定义的**
 
-实际上无论是 `Vue` 的 `watch` 选项还是 `vm.$watch` 函数,他们实现都是通过实例化 `Watcher` 类完成的,等到我们讲解 `Vue` 的 `watch` 选项和 `vm.$watch` 的具体实现时大家会看到,除了内部定义的观察者(如:渲染函数的观察者、计算属性的观察者等)之外,所有观察者都被认为是开发者定义的,这时 `options.user` 会自动被设置为 `true`。
+实际上无论是 `Vue` 的 `watch` 选项还是 `vm.$watch` 函数,他们实现都是通过实例化 `Watcher` 类完成的,等到我们讲解 `Vue` 的 `watch` 选项和 `vm.$watch` 的具体实现时大家会看到,除了内部定义的观察者(如:渲染函数的观察者、计算属性的观察者等)之外,所有观察者都被认为是开发者定义的,这时 `options.user` 会自动被设置为 `true`。
 
 * `options.computed`,用来标识当前观察者实例对象是否是计算属性的观察者
 
@@ -674,7 +674,7 @@ if (this.computed) {
 }
 ```
 
-通过这段代码我们可以发现,计算属性的观察者和其他观察者实例对象的处理方式是不同的,对于计算属性的观察者我们会在讲解计算属性详细说明。除计算属性的观察者之外的所有观察者实例对象都将执行如上代码的 `else` 分支语句,即调用 `this.get()` 方法。
+通过这段代码我们可以发现,计算属性的观察者和其他观察者实例对象的处理方式是不同的,对于计算属性的观察者我们会在讲解计算属性详细说明。除计算属性的观察者之外的所有观察者实例对象都将执行如上代码的 `else` 分支语句,即调用 `this.get()` 方法。
 
 ## 依赖收集的过程
 
@@ -989,11 +989,11 @@ removeSub (sub: Watcher) {
 }
 ```
 
-它的内容很简单,接收一个要被移除的观察者作为参数,然后使用 `remove` 工具函数,将该观察者从 `this.subs` 数组中移除。其中 `remove` 工具函数来自 `src/shared/util.js` 文件,可以在 [shared/util.js 文件工具方法全解](shared-util.html#remove) 中查看。
+它的内容很简单,接收一个要被移除的观察者作为参数,然后使用 `remove` 工具函数,将该观察者从 `this.subs` 数组中移除。其中 `remove` 工具函数来自 `src/shared/util.js` 文件,可以在 [shared/util.js 文件工具方法全解](../appendix/shared-util.html#remove) 中查看。
 
 ## 触发依赖的过程
 
-在上一小节中我们提到了,每次求值并收集完观察者之后,会将当次求值所收集到的观察者保存到另外一组属性中,即 `depIds` 和 `deps`,并将存有当次求值所收集到的观察者的属性清空,即清空 `newDepIds` 和 `newDeps`。我们当时也说过了,这么做的目的是为了对比当次求值与上一次求值所收集到的观察者的变化情况,并作出合理的矫正工作,比如移除那已经没有关联关系的观察者等。本节我们将以数据属性的变化为切入点,讲解重新求值的过程。
+在上一小节中我们提到了,每次求值并收集完观察者之后,会将当次求值所收集到的观察者保存到另外一组属性中,即 `depIds` 和 `deps`,并将存有当次求值所收集到的观察者的属性清空,即清空 `newDepIds` 和 `newDeps`。我们当时也说过了,这么做的目的是为了对比当次求值与上一次求值所收集到的观察者的变化情况,并作出合理的矫正工作,比如移除那已经没有关联关系的观察者等。本节我们将以数据属性的变化为切入点,讲解重新求值的过程。
 
 假设我们有如下模板:
 
@@ -1059,7 +1059,7 @@ run () {
 }
 ```
 
-`run` 方法的代码很简短,它判断了当前观察者实例的 `this.active` 属性是否为真,其中 `this.active` 属性用来标识一个观察者是否处于激活状态,或者可用状态。如果观察者处于激活状态那么 `thisd.active` 的值为真,此时会调用观察者实例对象的 `getAndInvoke` 方法,并以 `this.cb` 作为参数,我们知道 `this.cb` 属性是一个函数,我们称之为回调函数,当变化发生时会触发,但是对于渲染函数的观察者来讲,`this.cb` 属性的值为 `noop`,即什么都不做。
+`run` 方法的代码很简短,它判断了当前观察者实例的 `this.active` 属性是否为真,其中 `this.active` 属性用来标识一个观察者是否处于激活状态,或者可用状态。如果观察者处于激活状态那么 `this.active` 的值为真,此时会调用观察者实例对象的 `getAndInvoke` 方法,并以 `this.cb` 作为参数,我们知道 `this.cb` 属性是一个函数,我们称之为回调函数,当变化发生时会触发,但是对于渲染函数的观察者来讲,`this.cb` 属性的值为 `noop`,即什么都不做。
 
 现在我们终于找到了更新变化的根源,那就是 `getAndInvoke` 方法,如下:
 
@@ -1267,7 +1267,7 @@ export function queueWatcher (watcher: Watcher) {
 let has: { [key: number]: ?true } = {}
 ```
 
-当 `queueWatcher` 函数被调用之后,会尝试将该观察者放入队列中,并将该观察者的 `id` 值登记到 `has` 对象上作为 `has` 对象的属性同时将该属性值设置为 `true`。该 `if` 语句以及变量 `has` 的作用就是用来避免将相同的观察者重复入队的。在 `if` 语句块内执行了真正的入队操作,如下代码高亮的部分所示:
+当 `queueWatcher` 函数被调用之后,会尝试将该观察者放入队列中,并将该观察者的 `id` 值登记到 `has` 对象上作为 `has` 对象的属性同时将该属性值设置为 `true`。该 `if` 语句以及变量 `has` 的作用就是用来避免将相同的观察者重复入队的。在 `if` 语句块内执行了真正的入队操作,如下代码高亮的部分所示:
 
 ```js {6}
 export function queueWatcher (watcher: Watcher) {
@@ -1652,7 +1652,7 @@ callbacks = [
 
 怎么样?我们的目的达到了,现在有两个 `microtask` 任务。
 
-而另外除了将变量 `pending` 的值重置为 `false` 之外,我们要知道第一个 `flushCallbacks` 函数遍历的并不是 `callbacks` 本身,而是它的赋值品 `copies` 数组,并且在第一个 `flushCallbacks` 函数的一开头就清空了 `callbacks` 数组本身。所以第二个 `flushCallbacks` 函数的一切流程与第一个 `flushCallbacks` 是完全相同。
+而另外除了将变量 `pending` 的值重置为 `false` 之外,我们要知道第一个 `flushCallbacks` 函数遍历的并不是 `callbacks` 本身,而是它的复制品 `copies` 数组,并且在第一个 `flushCallbacks` 函数的一开头就清空了 `callbacks` 数组本身。所以第二个 `flushCallbacks` 函数的一切流程与第一个 `flushCallbacks` 是完全相同。
 
 最后我们再来讲一下,当调用 `$nextTick` 方法时不传递回调函数时,是如何实现返回 `Promise` 实例对象的,实现很简单我们来看一下 `nextTick` 函数的代码,如下:
 
@@ -1768,7 +1768,7 @@ if (options.immediate) {
 }
 ```
 
-我们知道 `immediate` 选项用来在属性或函数被侦听后立即执行回调,如代码就是其实现原理,如果发现 `options.immediate` 选项为真,那么会执执行回调函数,不过此时回调函数的参数只有新值没有旧值。同时取值的方式是通过前面创建的观察者实例对象的 `watcher.value` 属性。我们知道观察者实例对象的 `value` 属性,保存着被观察属性的值。
+我们知道 `immediate` 选项用来在属性或函数被侦听后立即执行回调,如代码就是其实现原理,如果发现 `options.immediate` 选项为真,那么会执执行回调函数,不过此时回调函数的参数只有新值没有旧值。同时取值的方式是通过前面创建的观察者实例对象的 `watcher.value` 属性。我们知道观察者实例对象的 `value` 属性,保存着被观察属性的值。
 
 最后 `$watch` 方法还有一个返回值,如下:
 
@@ -2428,7 +2428,7 @@ if (!isSSR) {
 const computedWatcherOptions = { computed: true }
 ```
 
-我们知道传递给 `Watcher` 类的第四个参数是观察者的选项参数,选项参数对象可以包含如 `deep`、`sync` 等选项,当然了其中也包括 `computed` 选项,通过如上这句代码可知创建计算属性观察者对象时 `computed` 选项为 `true`,它的作用就是用来标识一个观察者对象是计算属性的观察者,计算属性的观察者与非计算属性的观察者的行为是不一样的。
+我们知道传递给 `Watcher` 类的第四个参数是观察者的选项参数,选项参数对象可以包含如 `deep`、`sync` 等选项,当然了其中也包括 `computed` 选项,通过如上这句代码可知创建计算属性观察者对象时 `computed` 选项为 `true`,它的作用就是用来标识一个观察者对象是计算属性的观察者,计算属性的观察者与非计算属性的观察者的行为是不一样的。
 
 再往下是 `for` 循环中的最后一段代码,如下: