chore: 添加异步组件注册涉及代码流程注释说明

Author: xkyong

Diff for: dist/vue.js

@@ -10,7 +10,13 @@ <h1>12-async-component</h1>
   <script>
     // 示例参看 examples/vue-cli-vue2.6-project 工程！
     // 相关注释也在工程中注明了！
-    
+    // 异步组件的代码执行也会先经过 src\core\vdom\create-component.js 文件中 createComponent 函数的处理
+    // 1.异步组件3种实现方式，涉及的核心代码在 src\core\vdom\helpers\resolve-async-component.js 文件中的 resolveAsyncComponent 函数
+    // (1)普通函数异步组件，通过 工厂函数 实现
+    // (2)Promise 异步组件，通过 import() 语法实现
+    // (3)高级异步组件，通过 对象配置 实现
+    // 2.通常情况下，异步组件实现的本质是2次渲染，先渲染成注释节点，当组件加载成功后，再通过forceRender重新渲染。
+    // 3.异步组件3种实现方式中，高级异步组件的设计是非常巧妙的，它可以通过简单的配置实现了loading、resolve、reject、timeout4种状态
   </script>
 </body>
 </html>

Diff for: examples/00-vue-analysis/12-async-component.html

@@ -6,14 +6,8 @@
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
-
 export default {
-  name: "App",
-  components: {
-  // 局部注册组件
-    HelloWorld,
-  },
+  name: "App"
 };
 </script>
 

Diff for: examples/vue-cli-vue2.6-project/src/App.vue

@@ -1,10 +1,55 @@
 import Vue from '../../../dist/vue'
 import App from './App.vue'
 
-// 全局注册组件
-Vue.component('app', App)
+// 官网链接：https://v2.cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6
+
+// 异步组件注册方式1：工厂函数
+// eslint-disable-next-line
+// Vue.component('HelloWorld', function (resolve, reject) {
+//   // 这个特殊的 require 语法告诉 webpack
+//   // 自动将编译后的代码分割为不同的 chunk 
+//   // 执行时会发送网络请求，网络响应成功后会执行这里传入的第 2 个回调函数
+//   require(['./components/HelloWorld'], function (res) {
+//     resolve(res)
+//   })
+// })
+
+// 异步组件注册方式2：import() 语法
+// Vue.component(
+//   'HelloWorld', 
+//   // 该 `import` 函数返回一个 Promise 对象
+//   () => import('./components/HelloWorld')
+// )
+
+// 异步组件注册方式3：对象配置
+const LoadingComp = {
+  template: '<div>loading</div>'
+}
+
+const ErrorComp = {
+  template: '<div>error</div>'
+}
+
+const AsyncComp = () => ({
+  // 需要加载的组件 (应该是一个 `Promise` 对象)
+  component: import('./components/HelloWorld'),
+  // 异步组件加载时使用的组件
+  loading: LoadingComp,
+  // 加载失败时使用的组件
+  error: ErrorComp,
+  // 说明：network 面板中把带宽调小测试效果更明显！
+  // 展示 加载时组件 的延时时间。默认值是 200 (毫秒)
+  // 即到了该延时时间才出现 loading 属性对应的组件，如果 component 属性对应的组件请求在该 延时时间 内响应回来了，则 加载时组件 不会出现在页面上！
+  delay: 200,
+  // 如果提供了超时时间且 component 属性对应组件加载也超时了，则使用加载失败时使用的error属性对应组件。
+  // 默认值是：`Infinity`，即等价于不传入 timeout 属性
+  // 如果要让该 AsyncComp 最终显示为 ErrorComp，则可以在 network 面板中设置“Slow 3G”
+  timeout: 3000
+})
+
+Vue.component('HelloWorld', AsyncComp)
 
 new Vue({
   el: '#app',
-  template: '<app></app>'
-})
+  render: h => h(App)
+}) 

Diff for: examples/vue-cli-vue2.6-project/src/main.js

@@ -161,6 +161,7 @@ export function createComponent (
       // as a comment node but preserves all the raw information for the node.
       // the information will be used for async server-rendering and hydration.
       /*如果这是一个异步组件则会不会返回任何东西（undifiened），直接return掉，等待回调函数去触发父组件更新。s*/
+      // 创建一个注释节点 VNode 实例
       return createAsyncPlaceholder(
         asyncFactory,
         data,