ソースを参照

更新前言,根据dev分支代码的修改更新文章

HcySunYang 7 年 前
コミット
dc17e84363
2 ファイル変更23 行追加12 行削除
  1. 12 12
      note/Vue的思路之选项的合并.md
  2. 11 0
      note/前言.md

+ 12 - 12
note/Vue的思路之选项的合并.md

@@ -237,7 +237,7 @@ strats.data = function (
 
       return parentVal
     }
-    return mergeDataOrFn.call(this, parentVal, childVal)
+    return mergeDataOrFn(parentVal, childVal)
   }
 
   return mergeDataOrFn(parentVal, childVal, vm)
@@ -265,7 +265,7 @@ if (childVal && typeof childVal !== 'function') {
 
   return parentVal
 }
-return mergeDataOrFn.call(this, parentVal, childVal)
+return mergeDataOrFn(parentVal, childVal)
 ```
 
 首先判断是否传递了子组件选项(`childVal`),并且检测 `childVla` 的类型是不是 `function`,如果 `childVla` 的类型不是 `function` 则会给你一个警告,也就是说 `childVla` 应该是一个函数,如果不是函数会提示你 `data` 的类型必须是一个函数,这就是我们知道的:*子组件中的 `data` 必须是一个返回对象的函数*。如果不是函数,除了给你一段警告之外,会直接返回 `parentVal`。
@@ -273,7 +273,7 @@ return mergeDataOrFn.call(this, parentVal, childVal)
 如果 `childVal` 是函数类型,那说明满足了子组件的 `data` 选项需要是一个函数的要求,那么就直接返回 `mergeDataOrFn` 函数的执行结果:
 
 ```js
-return mergeDataOrFn.call(this, parentVal, childVal)
+return mergeDataOrFn(parentVal, childVal)
 ```
 
 上面的情况是在 `strats.data` 策略函数拿不到 `vm` 参数时的情况,如果拿到了 `vm` 参数,那么说明处理的选项不是子组件的选项,而是正常使用 `new` 操作符创建实例时的选项,这个时候则直接返回 `mergeDataOrFn` 的函数执行结果,但是会多透传一个参数 `vm`:
@@ -312,7 +312,7 @@ export function mergeDataOrFn (
         typeof parentVal === 'function' ? parentVal.call(this) : parentVal
       )
     }
-  } else if (parentVal || childVal) {
+  } else {
     return function mergedInstanceDataFn () {
       // instance merge
       const instanceData = typeof childVal === 'function'
@@ -411,12 +411,12 @@ return function mergedDataFn () {
 return mergeDataOrFn(parentVal, childVal, vm)
 ```
 
-我们发现同样是调用 `mergeDataOrFn` 函数,只不过这个时候传递了 `vm` 参数,也就是说这将会执行 `mergeDataOrFn` 的 `else if` 分支:
+我们发现同样是调用 `mergeDataOrFn` 函数,只不过这个时候传递了 `vm` 参数,也就是说这将会执行 `mergeDataOrFn` 的 `else` 分支:
 
 ```js
 if (!vm) {
   ...
-} else if (parentVal || childVal) {
+} else {
   return function mergedInstanceDataFn () {
     // instance merge
     const instanceData = typeof childVal === 'function'
@@ -434,7 +434,7 @@ if (!vm) {
 }
 ```
 
-`else if` 分支判断了 `parentVal` 和 `childVal` 二者有其一即可,实际上这个判断是多余的,这二者必然会有其一否则 `strats.data` 策略函数都不会被执行,就更不会执行 `mergeDataOrFn` 这个函数啦。总之,如果走了 `else if` 分支的话那么就直接返回 `mergedInstanceDataFn` 函数,注意此时的 `mergedInstanceDataFn` 函数同样还没有执行,它是 `mergeDataOrFn` 函数的返回值,所以这再次说明了一个问题:*`mergeDataOrFn` 函数永远返回一个函数*。
+如果走了 `else` 分支的话那么就直接返回 `mergedInstanceDataFn` 函数,注意此时的 `mergedInstanceDataFn` 函数同样还没有执行,它是 `mergeDataOrFn` 函数的返回值,所以这再次说明了一个问题:*`mergeDataOrFn` 函数永远返回一个函数*。
 
 也就是说,假如以我们的例子为例:
 
@@ -476,7 +476,7 @@ export function mergeDataOrFn (
       return childVal
     }
     ...
-  } else if (parentVal || childVal) {
+  } else {
     ...
   }
 }
@@ -497,7 +497,7 @@ export function mergeDataOrFn (
       return parentVal
     }
     ...
-  } else if (parentVal || childVal) {
+  } else {
     ...
   }
 }
@@ -520,7 +520,7 @@ export function mergeDataOrFn (
         typeof parentVal === 'function' ? parentVal.call(this) : parentVal
       )
     }
-  } else if (parentVal || childVal) {
+  } else {
     ...
   }
 }
@@ -536,7 +536,7 @@ export function mergeDataOrFn (
 ): ?Function {
   if (!vm) {
     ...
-  } else if (parentVal || childVal) {
+  } else {
     // 当合并处理的是非子组件的选项时 `data` 函数为 `mergedInstanceDataFn` 函数
     return function mergedInstanceDataFn () {
       // instance merge
@@ -1029,7 +1029,7 @@ function assertObjectType (name: string, value: any, vm: ?Component) {
 
 就是使用 `isPlainObject` 进行判断。上面我们都在以 `components` 进行讲解,对于指令(`directives`)和过滤器(`filters`)也是一样的,因为他们都是用 `mergeAssets` 进行合并处理。
 
-
+##### 选项 watch 的合并策略
 
 
 

+ 11 - 0
note/前言.md

@@ -1,5 +1,16 @@
 ## 前言
 
+#### 前言之前
+
+有的同学可能会有疑问,比如:*你又不是作者本人,你怎么知道人家的代码为什么那么写*、*Vue.js又不是你写的,谁知道你分析的对不对* 等等。
+
+对于第一个问题我想说的是,你们的怀疑是对的,毕竟最有权威分析 `Vue` 源码的人就是尤大,但同学们要知道*尤大才没有时间来给大家写一套源码分析的文章*。对于第二个问题,`Vue` 确实不是我写的,但为了证明这套文章还是稍微有点质量的,在这里我把所有我给 `Vue` 的PR都贴在下面,也证明我确实对 `Vue` 有些粗浅的理解。
+
+* [https://github.com/vuejs/vue/pull/6795](https://github.com/vuejs/vue/pull/6795)
+* [https://github.com/vuejs/vue/pull/6833](https://github.com/vuejs/vue/pull/6833)
+
+#### 文章特点
+
 这套文章是分析 Vue 源码的文章,且会跟随 Vue 仓库的 dev 分支的源码的变化实时更新(注:有的时候 dev 分支的更新到文章的更新会有稍许延迟)。
 
 #### 你应该了解的