feat: 支持异步组件，组件内增加init初始化方法

Author: agileago

docs/guide/component.md

@@ -156,4 +156,24 @@ class Foo extends VueComponent<Foo_Props> {
     )
   }
 }
+```
+
+## 异步组件
+
+异步组件需配合`vue`提供的`Suspense`组件使用，只需要组件内定义`init` 方法并且返回`promise`结果
+
+```tsx
+class Foo extends VueComponent {
+  async init() {
+    await new Promise(r => setTimeout(r, 5000))
+  }
+  
+  render() {
+    return (
+      <div>
+        {this.context.slots.item?.('aaaa')}
+      </div>
+    )
+  }
+}
 ```

example/module/basic/basic.module.tsx

@@ -1,3 +1,5 @@
+import { Spin } from 'ant-design-vue'
+import { Suspense } from 'vue'
 import { RouterView } from 'vue-router'
 import { Hook, VueComponent } from 'vue3-oop'
 
@@ -7,6 +9,22 @@ export default class BasicModule extends VueComponent {
     console.log(this.$parent)
   }
   render() {
-    return <RouterView></RouterView>
+    return (
+      <RouterView>
+        {({ Component }: { Component: any }) => {
+          return (
+            <div>
+              <h2>111</h2>
+              <Suspense
+                v-slots={{
+                  default: () => [Component],
+                  fallback: () => <Spin>loading....</Spin>,
+                }}
+              ></Suspense>
+            </div>
+          )
+        }}
+      </RouterView>
+    )
   }
 }

example/module/basic/hello-world/hello-world.view.tsx

@@ -4,6 +4,10 @@ import { Button, Card, Input } from 'ant-design-vue'
 export default class HelloWorldView extends VueComponent {
   @Mut() count = 1
 
+  async init() {
+    await new Promise((r) => setTimeout(r, 5000))
+  }
+
   render() {
     return (
       <Card title={'加减功能'}>

src/extends/component.ts

@@ -125,6 +125,9 @@ export class VueComponent<T extends {} = {}> {
 
   /** 渲染函数 */
   render?(ctx: ComponentPublicInstance, cache: any[]): VNodeChild
+
+  /* 组件初始化逻辑，如果返回promise则为异步组件, 需配合 suspense 组件使用 */
+  init?(): any
 }
 // 某些浏览器不支持 static get
 Object.defineProperty(VueComponent, '__vccOpts', {
@@ -148,6 +151,19 @@ Object.defineProperty(VueComponent, '__vccOpts', {
           const instance = VueComponent.resolveComponent(CompConstructor)
           // 支持模板
           if (CompConstructor.__vccOpts__value!.render) return instance
+          // 支持异步组件
+          if (typeof instance.init === 'function') {
+            console.log('init func')
+            const res = instance.init()
+            if (
+              res &&
+              typeof res === 'object' &&
+              typeof res.then === 'function'
+            ) {
+              return res.then(() => instance.render.bind(instance))
+            }
+          }
+
           return instance.render.bind(instance)
         },
       }
@@ -171,6 +187,19 @@ Object.defineProperty(VueComponent, '__vccOpts', {
         const instance = VueComponent.resolveComponent(CompConstructor)
         // 支持模板
         if (CompConstructor.__vccOpts__value!.render) return instance
+
+        // 支持异步组件
+        if (typeof instance.init === 'function') {
+          const res = instance.init()
+          if (
+            res &&
+            typeof res === 'object' &&
+            typeof res.then === 'function'
+          ) {
+            return res.then(() => instance.render.bind(instance))
+          }
+        }
+
         return instance.render.bind(instance)
       },
     }