HcySunYang 7 лет назад
Родитель
Сommit
8a1f217930

+ 9 - 2
note/2Vue构造函数.md

@@ -263,6 +263,7 @@ Vue.prototype._render = function (): VNode {}
 import Vue from './instance/index'
 import { initGlobalAPI } from './global-api/index'
 import { isServerRendering } from 'core/util/env'
+import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
 
 // 将 Vue 构造函数作为参数,传递给 initGlobalAPI 方法,该方法来自 ./global-api/index.js 文件
 initGlobalAPI(Vue)
@@ -280,6 +281,11 @@ Object.defineProperty(Vue.prototype, '$ssrContext', {
   }
 })
 
+// expose FunctionalRenderContext for ssr runtime helper installation
+Object.defineProperty(Vue, 'FunctionalRenderContext', {
+  value: FunctionalRenderContext
+})
+
 // Vue.version 存储了当前 Vue 的版本号
 Vue.version = '__VERSION__'
 
@@ -287,11 +293,12 @@ Vue.version = '__VERSION__'
 export default Vue
 ```
 
-上面的代码中,首先从 `Vue` 的出生文件,也就是 `instance/index.js` 文件导入 `Vue`,然后分别从两个文件导入了两个变量,如下:
+上面的代码中,首先从 `Vue` 的出生文件,也就是 `instance/index.js` 文件导入 `Vue`,然后分别从三个文件导入了三个变量,如下:
 
 ```js
 import { initGlobalAPI } from './global-api/index'
 import { isServerRendering } from 'core/util/env'
+import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
 ```
 
 其中 `initGlobalAPI` 是一个函数,并且以 `Vue` 构造函数作为参数进行调用:
@@ -300,7 +307,7 @@ import { isServerRendering } from 'core/util/env'
 initGlobalAPI(Vue)
 ```
 
-然后在 `Vue.prototype` 上分别添加了两个只读的属性,分别是:`$isServer` 和 `$ssrContext`。
+然后在 `Vue.prototype` 上分别添加了两个只读的属性,分别是:`$isServer` 和 `$ssrContext`。接着又在 `Vue` 构造函数上定义了 `FunctionalRenderContext` 静态属性,并且 `FunctionalRenderContext` 属性的值为来自 `core/vdom/create-functional-component.js` 文件的 `FunctionalRenderContext`,之所以在 `Vue` 构造函数上暴露该属性,是为了在 `ssr` 中使用它。
 
 最后,在 `Vue` 构造函数上添加了一个静态属性 `version`,存储了当前 `Vue` 的版本值,但是这里的 `'__VERSION__'` 是什么鬼?打开 `scripts/config.js` 文件,找到 `genConfig` 方法,其中有这么一句话:`__VERSION__: version`。这句话被写在了 `rollup` 的 `replace` 插件中,也就是说,`__VERSION__` 最终将被 `version` 的值替换,而 `version` 的值就是 `Vue` 的版本号。
 

+ 2 - 2
note/7Vue的编译器初探.md

@@ -209,7 +209,7 @@ const { render, staticRenderFns } = compileToFunctions(template, {
 
 另外 `delimiters` 和 `comments` 这两个选项大家在 `Vue` 的官方文档都能够找到讲解。而这里我要强调的是在 `Vue` 官方文档中有特殊说明,即这两个选项只在完整版的 `Vue` 中可用。这是为什么呢?可能有的同学已经知道了,其原因是这两个选项只有在创建完整版 `Vue` 的时候才会用到,大家不要忘了 `entry-runtime-with-compiler.js` 这个文件是完整版 `Vue` 的入口,也就是说运行时版的 `Vue` 压根不存在这些内容所以自然不会起作用。
 
-现在我们知道了传递给 `compileToFunctions` 的选项参数都包括些什么了,同时我们也知道这里的 `compileToFunctions` 函数实际上就是 `src/compiler/to-function.js` 文件中的 `compileToFunctions`,所以下一步我们将实现转移到 `src/compiler/to-function.js` 文件中的 `compileToFunctions` 函数,不过在这之前我还要啰嗦一句,大家注意 `compileToFunctions` 函数是接收三个参数的,第三个参数是当前 `Vue` 实例。
+现在我们知道了传递给 `compileToFunctions` 的选项参数都包括些什么了,同时我们也知道这里的 `compileToFunctions` 函数实际上就是 `src/compiler/to-function.js` 文件中的 `compileToFunctions`,所以下一步我们将视线转移到 `src/compiler/to-function.js` 文件中的 `compileToFunctions` 函数,不过在这之前我还要啰嗦一句,大家注意 `compileToFunctions` 函数是接收三个参数的,第三个参数是当前 `Vue` 实例。
 
 打开 `src/compiler/to-function.js` 文件,找到 `compileToFunctions` 函数,首先是这三行代码:
 
@@ -795,7 +795,7 @@ return compiled
 * 2、对错误的收集
 * 3、调用 `baseCompile` 编译模板
 
-补充:上面的分析中,我们并有深入讲解 `detectErrors` 函数是如何根据抽象语法树(AST)检查模板中是否存在表达式错误的,这是因为现在对于大家来讲还不清楚抽象语法树的模样,且这并不会对大家的理解造成障碍,所以我们将这部分的讲解后移,等我们对 AST 心知肚明之后再来看这部分内容也不迟。
+补充:上面的分析中,我们并有深入讲解 `detectErrors` 函数是如何根据抽象语法树(AST)检查模板中是否存在表达式错误的,这是因为现在对于大家来讲还不清楚抽象语法树的模样,且这并不会对大家的理解造成障碍,所以我们将这部分的讲解后移,等我们对 AST 心知肚明之后再来看这部分内容也不迟。
 
 
 

+ 5 - 0
note/附录/Vue构造函数整理-全局API.md

@@ -49,6 +49,11 @@ Vue.filter = function (
   definition: Function | Object
 ): Function | Object | void {}
 
+// expose FunctionalRenderContext for ssr runtime helper installation
+Object.defineProperty(Vue, 'FunctionalRenderContext', {
+  value: FunctionalRenderContext
+})
+
 Vue.version = '__VERSION__'
 
 // entry-runtime-with-compiler.js