Browse Source

修改错别字,更正描述使语言更顺畅

HcySunYang 7 years ago
parent
commit
63399ab206
2 changed files with 22 additions and 26 deletions
  1. 11 11
      note/5Vue选项的合并.md
  2. 11 15
      note/6Vue的初始化.md

+ 11 - 11
note/5Vue选项的合并.md

@@ -626,7 +626,7 @@ function mergeData (to: Object, from: ?Object): Object {
 }
 ```
 
-`mergeData` 函数接收两个参数 `to` 和 `from`,根据 `mergeData` 函数被调用时参数的传递顺序我们知道,`to` 对应的是 `childVla` 产生的对象,`from` 对应 `parentVal` 产生的纯对象,我们看 `mergeData` 第一句代码:
+`mergeData` 函数接收两个参数 `to` 和 `from`,根据 `mergeData` 函数被调用时参数的传递顺序我们知道,`to` 对应的是 `childVla` 产生的对象,`from` 对应 `parentVal` 产生的纯对象,我们看 `mergeData` 第一句代码:
 
 ```js
 if (!from) return to
@@ -664,7 +664,7 @@ return to
 
 这个问题是什么意思呢?我们知道合并阶段 `strats.data` 将被处理成一个函数,但是这个函数并没有被执行,而是到了后面初始化的阶段才执行的,这个时候才会调用 `mergeData` 对数据进行合并处理,那这么做的目的是什么呢?
 
-其实这么做是有原因的,后面到 `Vue` 的初始化的时候,大家就会发现 `inject` 和 `props` 这两个选项的初始化是先于 `data` 选项的,这就保证了我们能够使用 `props` 初始化 `data` 中的数据,如下:
+其实这么做是有原因的,后面到 `Vue` 的初始化的时候,大家就会发现 `inject` 和 `props` 这两个选项的初始化是先于 `data` 选项的,这就保证了我们能够使用 `props` 初始化 `data` 中的数据,如下:
 
 ```js
 // 子组件:使用 props 初始化子组件的 childData 
@@ -785,7 +785,7 @@ LIFECYCLE_HOOKS.forEach(hook => {
 })
 ```
 
-使用 `forEach` 遍历 `LIFECYCLE_HOOKS` 变量,那说明这个变量应该是一个数组,我们根据 `options.js` 文件头部的引用关系可知 `LIFECYCLE_HOOKS` 变量来自于 `shared/constants.js` 文件,我们打开这个文件找到 `LIFECYCLE_HOOKS` 变量如下:
+使用 `forEach` 遍历 `LIFECYCLE_HOOKS` 常量,那说明这个常量应该是一个数组,我们根据 `options.js` 文件头部的引用关系可知 `LIFECYCLE_HOOKS` 常量来自于 `shared/constants.js` 文件,我们打开这个文件找到 `LIFECYCLE_HOOKS` 常量如下:
 
 ```js
 export const LIFECYCLE_HOOKS = [
@@ -803,7 +803,7 @@ export const LIFECYCLE_HOOKS = [
 ]
 ```
 
-可以发现 `LIFECYCLE_HOOKS` 量实际上是由与生命周期钩子同名的字符串组成的数组。
+可以发现 `LIFECYCLE_HOOKS` 量实际上是由与生命周期钩子同名的字符串组成的数组。
 
 所以现在再回头来看那段 `forEach` 语句可知,它的作用就是在 `strats` 策略对象上添加用来合并各个生命周期钩子选项的策略函数,并且这些生命周期钩子选项的策略函数相同:*都是 `mergeHook` 函数*。
 
@@ -836,7 +836,7 @@ retrun (是否有 childVal,即判断组件的选项中是否有对应名字的
   : 如果没有 childVal 则直接返回 parentVal
 ```
 
-如上就是对 `mergeHook` 函数的解读,我们可以发现,在经过 `mergeHook` 函数处理之后,组件选项的生命周期钩子函数被合并成一个数组。第一个三目运算符需要注意,它判断是否有 `childVal`,即组件的选项是否写了生命周期钩子函数,如果有则直接返回了 `parentVal`,这里有个问题:`parentVal` 一定是数组吗?答案是:*如果有 `parentVal` 那么其一定是数组,如果没有 `parentVal` 那么 `strats[hooks]` 函数根本不会执行*。我们以 `created` 声明周期钩子函数为例:
+如上就是对 `mergeHook` 函数的解读,我们可以发现,在经过 `mergeHook` 函数处理之后,组件选项的生命周期钩子函数被合并成一个数组。第一个三目运算符需要注意,它判断是否有 `childVal`,即组件的选项是否写了生命周期钩子函数,如果有则直接返回了 `parentVal`,这里有个问题:`parentVal` 一定是数组吗?答案是:*如果有 `parentVal` 那么其一定是数组,如果没有 `parentVal` 那么 `strats[hooks]` 函数根本不会执行*。我们以 `created` 声明周期钩子函数为例:
 
 如下代码:
 
@@ -874,7 +874,7 @@ const Child = new Parent({
 })
 ```
 
-其中 `Child` 使用 `new Parent` 生成的,所以对于 `Child` 来讲,`childVal` 是:
+其中 `Child` 使用 `new Parent` 生成的,所以对于 `Child` 来讲,`childVal` 是:
 
 ```js
 created: function () {
@@ -953,7 +953,7 @@ new Vue({
 
 ##### 资源(assets)选项的合并策略
 
-在 `Vue` 中 `directives`、`filters` 以及 `components` 被认为是资源,其实很好理解,指令、过滤器和组件都是可以作为第三方应用来提供的,比如你需要一个模拟滚动的组件,你当然可以选用超级强大的三方组件 [simulation-scroll-y](https://fmover.hcysun.me/#/zh-cn/vue-components/simulation-scroll-y-vue),所以这样看来 [simulation-scroll-y](https://fmover.hcysun.me/#/zh-cn/vue-components/simulation-scroll-y-vue) 就可以认为是资源,除了组件之外指令和过滤器也都是同样的道理。
+在 `Vue` 中 `directives`、`filters` 以及 `components` 被认为是资源,其实很好理解,指令、过滤器和组件都是可以作为第三方应用来提供的,比如你需要一个模拟滚动的组件,你当然可以选用超级强大的第三方组件 [scroll-flip-page](https://github.com/HcySunYang/scroll-flip-page),所以这样看来 [scroll-flip-page](https://github.com/HcySunYang/scroll-flip-page) 就可以认为是资源,除了组件之外指令和过滤器也都是同样的道理。
 
 而我们接下来要看的代码就是用来合并处理 `directives`、`filters` 以及 `components` 等资源选项的,看如下代码:
 
@@ -985,7 +985,7 @@ ASSET_TYPES.forEach(function (type) {
 })
 ```
 
-与生命周期钩子的合并处理策略基本一致,以上代码段也分为两部分:`mergeAssets` 函数以及一个 `forEach` 语句。我们同样先看 `forEach` 语句,这个 `forEach` 循环用来遍历 `ASSET_TYPES` 变量,根据 `options.js` 文件头部的引用关系可知 `ASSET_TYPES` 变量来自于 `shared/constants.js` 文件,我们打开 `shared/constants.js` 文件找到 `ASSET_TYPES` 量如下:
+与生命周期钩子的合并处理策略基本一致,以上代码段也分为两部分:`mergeAssets` 函数以及一个 `forEach` 语句。我们同样先看 `forEach` 语句,这个 `forEach` 循环用来遍历 `ASSET_TYPES` 常量,根据 `options.js` 文件头部的引用关系可知 `ASSET_TYPES` 常量来自于 `shared/constants.js` 文件,我们打开 `shared/constants.js` 文件找到 `ASSET_TYPES` 量如下:
 
 ```js
 export const ASSET_TYPES = [
@@ -1011,7 +1011,7 @@ ASSET_TYPES.forEach(function (type) {
 })
 ```
 
-我们发现在循环内部它有手动拼接上一个 `'s'`,所以最终的结果就是在 `strats` 策略对象上添加与资源选项名字相同的策略函数,用来分别合并处理三类资源。所以接下来我们就看看它是怎么合并的,`mergeAssets` 代码如下:
+我们发现在循环内部它有手动拼接上一个 `'s'`,所以最终的结果就是在 `strats` 策略对象上添加与资源选项名字相同的策略函数,用来分别合并处理三类资源。所以接下来我们就看看它是怎么处理的,`mergeAssets` 代码如下:
 
 ```js
 function mergeAssets (
@@ -1032,7 +1032,7 @@ function mergeAssets (
 
 上面的代码本身逻辑很简单,首先以 `parentVal` 为原型创建对象 `res`,然后判断是否有 `childVal`,如果有的话使用 `extend` 函数将 `childVal` 上的属性混合到 `res` 对象上并返回。如果没有 `childVal` 则直接返回 `res`。
 
-举个例子,大家知道任何组件的模板中我们都可以直接使用 `<transition/>` 组件或者 `<keep-alive/>` 等,但是我们并没有在我们自己的组件实例的 `components` 选项中显示的声明这些组件。那么这是怎么做到的呢?其实答案就在 `mergeAssets` 函数中。下面的代码为例:
+举个例子,大家知道任何组件的模板中我们都可以直接使用 `<transition/>` 组件或者 `<keep-alive/>` 等,但是我们并没有在我们自己的组件实例的 `components` 选项中显示的声明这些组件。那么这是怎么做到的呢?其实答案就在 `mergeAssets` 函数中。下面的代码为例:
 
 ```js
 var v = new Vue({
@@ -1382,7 +1382,7 @@ strats.computed = function (
 策略函数内容如下:
 
 ```js
-// 如果存在 childVal,那么在非生产环境下要监测 childVal 的类型
+// 如果存在 childVal,那么在非生产环境下要检查 childVal 的类型
 if (childVal && process.env.NODE_ENV !== 'production') {
   assertObjectType(key, childVal, vm)
 }

+ 11 - 15
note/6Vue的初始化.md

@@ -87,17 +87,13 @@ var vm = new Vue({
 })
 ```
 
-这个时候 `mergeOptions` 函数将会把 `Vue.options` 作为 父选项,把我们传递的实例选项作为子选项进行合并,合并的结果我们可以通过打印 `$options` 属性得知。其实我们前面已经分析过了,`el` 选项将使用默认合并策略合并,最终的值就是字符串 `'#app'`,而 `data` 选项将变成一个函数,且这个函数的执行结果就是合并后的数据,那么在这里,合并后的数据就是 `{test: 1}` 这个对象
+这个时候 `mergeOptions` 函数将会把 `Vue.options` 作为 父选项,把我们传递的实例选项作为子选项进行合并,合并的结果我们可以通过打印 `$options` 属性得知。其实我们前面已经分析过了,`el` 选项将使用默认合并策略合并,最终的值就是字符串 `'#app'`,而 `data` 选项将变成一个函数,且这个函数的执行结果就是合并后的数据,即: `{test: 1}`
 
 下面是 `vm.$options` 的截图:
 
 ![](http://ovjvjtt4l.bkt.clouddn.com/2017-11-02-083231.jpg)
 
-我们发现 `el` 确实还是原来的值,而 `data` 也确实变成了一个函数,并且这个函数就是我们之前遇到过的 `mergedInstanceDataFn`,除此之外我们还能看到其他合并后的选项,其中 `components`、`directives`、`filters` 以及 `_base` 我们知道是存在与 `Vue.options` 中的,至于 `render` 和 `staticRenderFns` 这两个选项是在将模板编译成渲染函数时添加上去的,我们后面会遇到。另外 `_parentElm` 和 `_refElm` 这两个选项是在为虚拟DOM创建组件实例时添加的,我们后面也会讲到,这里大家不需要关心,免得失去重点。最后还有一个 `inject` 选项,我们知道无论是 `Vue.options` 中还是实例选项中都没有 `inject`,那么这个 `inject` 是哪来的呢?大家还记不记得在 [Vue的思路之选项的规范化](/note/Vue的思路之选项的规范化) 一节中,在对 `inject` 选项进行规范化的时候,即使我们的选项没有写 `inject` 选项,其内部也会将其初始化为一个空对象,也就是在 `normalizeInject` 函数中的第二句代码:
-
-```js
-const normalized = options.inject = {}
-```
+我们发现 `el` 确实还是原来的值,而 `data` 也确实变成了一个函数,并且这个函数就是我们之前遇到过的 `mergedInstanceDataFn`,除此之外我们还能看到其他合并后的选项,其中 `components`、`directives`、`filters` 以及 `_base` 我们知道是存在于 `Vue.options` 中的,至于 `render` 和 `staticRenderFns` 这两个选项是在将模板编译成渲染函数时添加上去的,我们后面会遇到。另外 `_parentElm` 和 `_refElm` 这两个选项是在为虚拟DOM创建组件实例时添加的,我们后面也会讲到,这里大家不需要关心,免得失去重点。
 
 #### 渲染函数的作用域代理
 
@@ -249,7 +245,7 @@ const hasHandler = {
 * with 检查: with(proxy) { (foo); }
 * Reflect.has()
 
-其中关键就在可以拦截 `with` 语句块里对变量的访问,后面我们会讲到。`has` 函数内出现了两个函数,分别是 `allowedGlobals` 以及 `warnNonPresent`,这两个函数也是定义在当前文件中,首先我们看一下 `allowedGlobals`:
+其中关键就在可以拦截 `with` 语句块里对变量的访问,后面我们会讲到。`has` 函数内出现了两个函数,分别是 `allowedGlobals` 以及 `warnNonPresent`,这两个函数也是定义在当前文件中,首先我们看一下 `allowedGlobals`:
 
 ```js
 const allowedGlobals = makeMap(
@@ -426,7 +422,7 @@ initLifecycle(vm)
 
 在 `initLifecycle` 函数执行之前,执行了 `vm._self = vm` 语句,这句话在 `Vue` 实例对象 `vm` 上添加了 `_self` 属性,指向真实的实例本身。注意 `vm._self` 和 `vm._renderProxy` 不同,首先在用途上来说寓意是不同的,另外 `vm._renderProxy` 有可能是一个代理对象,即 `Proxy` 实例。
 
-接下来执行的才是 `initLifecycle` 函数,同将当前 `Vue` 实例 `vm` 作为参数传递。打开 `core/instance/lifecycle.js` 文件找到 `initLifecycle` 函数,如下:
+接下来执行的才是 `initLifecycle` 函数,同将当前 `Vue` 实例 `vm` 作为参数传递。打开 `core/instance/lifecycle.js` 文件找到 `initLifecycle` 函数,如下:
 
 ```js
 export function initLifecycle (vm: Component) {
@@ -457,7 +453,7 @@ export function initLifecycle (vm: Component) {
 }
 ```
 
-上面代码是 `initLifecycle` 函数的全部内容,首先定义 `options` 常量,它是 `vm.$options` 的引用,然后将执行下面这段代码:
+上面代码是 `initLifecycle` 函数的全部内容,首先定义 `options` 常量,它是 `vm.$options` 的引用。接着将执行下面这段代码:
 
 ```js
 // locate first non-abstract parent (查找第一个非抽象的父组件)
@@ -469,7 +465,7 @@ if (parent && !options.abstract) {
   while (parent.$options.abstract && parent.$parent) {
     parent = parent.$parent
   }
-  // 经过上线的 while 循环后,parent 应该是一个非抽象的组件,将它作为当前实例的父级,所以将当前实例 vm 添加到父级的 $children 属性里
+  // 经过上的 while 循环后,parent 应该是一个非抽象的组件,将它作为当前实例的父级,所以将当前实例 vm 添加到父级的 $children 属性里
   parent.$children.push(vm)
 }
 
@@ -486,7 +482,7 @@ vm.$root = parent ? parent.$root : vm
 let parent = options.parent
 ```
 
-通过读取 `options.parent` 获取父实例,但是问题来了,我们知道 `options` 是 `vm.$options` 的引用,所以这里的 `options.parent` 相当于 `vm.$options.parent`,这里的 `parent` 从哪里来?比如下面的例子:
+通过读取 `options.parent` 获取父实例,但是问题来了,我们知道 `options` 是 `vm.$options` 的引用,所以这里的 `options.parent` 相当于 `vm.$options.parent`,那么 `vm.$options.parent` 从哪里来?比如下面的例子:
 
 ```js
 // 子组件本身并没有指定 parent 选项
@@ -655,7 +651,7 @@ if (parent && !options.abstract) {
 }
 ```
 
-拿到父实例 `parent` 之后,进入一个判断分支,条件是:`parent && !options.abstract`,即*父实例存在,且当前实例不是抽象的*,这里大家可能会有疑问:*什么是抽象的实例*?实际上 `Vue` 内部有一些选项是没有暴露给我们的,就比如这里的 `abstract`,通过设置这个选项为 `true`,可以指定该组件抽象的,那么通过该组件创建的实例也都是抽象的,比如:
+拿到父实例 `parent` 之后,进入一个判断分支,条件是:`parent && !options.abstract`,即*父实例存在,且当前实例不是抽象的*,这里大家可能会有疑问:*什么是抽象的实例*?实际上 `Vue` 内部有一些选项是没有暴露给我们的,就比如这里的 `abstract`,通过设置这个选项为 `true`,可以指定该组件抽象的,那么通过该组件创建的实例也都是抽象的,比如:
 
 ```js
 AbsComponents = {
@@ -676,7 +672,7 @@ export default {
 }
 ```
 
-可以发现,它使用 `abstract` 选项来声明这是一个抽象组件。除了不渲染真实DOM,抽象组件还有一个特点,就是它们不会父子关系的路径上。这么设计也是合理的,这是由它们的性质所决定的。
+可以发现,它使用 `abstract` 选项来声明这是一个抽象组件。除了不渲染真实DOM,抽象组件还有一个特点,就是它们不会出现在父子关系的路径上。这么设计也是合理的,这是由它们的性质所决定的。
 
 所以现在大家再回看这段代码:
 
@@ -700,7 +696,7 @@ vm.$parent = parent
 vm.$root = parent ? parent.$root : vm
 ```
 
-如果 `options.abstract` 为真,那说明当前实例是抽象的,所以并不会走 `if` 分支的代码,所以会跳过 `if` 语句块直接设置 `vm.$parent` 和 `vm.$root` 的值。如果 `options.abstract` 为假,那说明当前实例不是抽象的,是一个普通的组件实例,这个时候就会走 `while` 循环,那么这个 `while` 循环是干嘛的呢?我们前面说过,抽象的组件是不能够也不应该作为父级的,所以 `while` 循环的目的就是沿着父实例链逐层向上寻找到第一个不抽象的实例作为 `parent`,也就是父级。并且在找到父级之后将当前实例添加到父实例的 `$children` 属性中,这样最终的目的就达成了。
+如果 `options.abstract` 为真,那说明当前实例是抽象的,所以并不会走 `if` 分支的代码,所以会跳过 `if` 语句块直接设置 `vm.$parent` 和 `vm.$root` 的值。如果 `options.abstract` 为假,那说明当前实例不是抽象的,是一个普通的组件实例,这个时候就会走 `while` 循环,那么这个 `while` 循环是干嘛的呢?我们前面说过,抽象的组件是不能够也不应该作为父级的,所以 `while` 循环的目的就是沿着父实例链逐层向上寻找到第一个不抽象的实例作为 `parent`(父级)。并且在找到父级之后将当前实例添加到父实例的 `$children` 属性中,这样最终的目的就达成了。
 
 在上面这段代码执行完毕之后,`initLifecycle` 函数还负责在当前实例上添加一些属性,即后面要执行的代码:
 
@@ -716,7 +712,7 @@ vm._isDestroyed = false
 vm._isBeingDestroyed = false
 ```
 
-其中 `$children` 和 `$refs` 都是我们属性的实例属性,他们都在 `initLifecycle` 函数中被初始化,其中 `$children` 被初始化为一个数组,`$refs` 被初始化为一个空 `json` 对象,除此之外,还定义了一些内部使用的属性,大家先混个脸熟,在后面的分析中自然会知道他们的用途,但是不要忘了,既然这些属性是在 `initLifecycle` 函数中定义的,那么自然会与声明周期有关。这样 `initLifecycle` 函数我们就分析完毕了,我们回到 `_init` 函数,看看接下来要做的初始化工作是什么。
+其中 `$children` 和 `$refs` 都是我们熟悉的实例属性,他们都在 `initLifecycle` 函数中被初始化,其中 `$children` 被初始化为一个数组,`$refs` 被初始化为一个空 `json` 对象,除此之外,还定义了一些内部使用的属性,大家先混个脸熟,在后面的分析中自然会知道他们的用途,但是不要忘了,既然这些属性是在 `initLifecycle` 函数中定义的,那么自然会与声明周期有关。这样 `initLifecycle` 函数我们就分析完毕了,我们回到 `_init` 函数,看看接下来要做的初始化工作是什么。
 
 
 #### 初始化之 initEvents