a

Author: ruojianll

readme.md

@@ -0,0 +1,40 @@
+# Read me
+
+This repo is not released yet. Welcome to suggest and contribute. Message me on github.
+
+# Example
+
+```typescript
+import { Component ,Base} from "ThisRepo";
+@Component
+export default class MyComponent extends Base{
+  prop = "p";//a property
+  meth() {//a method
+    this.$forceUpdate()//call vue api
+  }
+  mounted(){//vue lifecycle hook
+    console.log('foo')
+  }
+}
+```
+
+is equal to 
+
+```typescript
+import { defineComponent} from "vue";
+export default defineComponent({
+    data(){
+        return {
+            prop:'p'
+        }
+    },
+    methods:{
+        meth(){
+            this.$forceUpdate()
+        }
+    },
+    mounted() {
+        console.log('foo')
+    }
+})
+```

src/component.ts

@@ -1,6 +1,26 @@
 import { defineComponent } from 'vue';
 import { obtainSlot } from './utils';
-function makeObject(names:string[],obj:any){
+
+const LifecycleNames = [
+    "beforeCreate",
+    "created",
+    "beforeMount",
+    "mounted",
+    "beforeUpdate",
+    "updated",
+    "activated",
+    "deactivated",
+    "beforeDestroy",
+    "beforeUnmount",
+    "destroyed",
+    "unmounted",
+    "renderTracked",
+    "renderTriggered",
+    "errorCaptured"
+]
+
+
+function makeObject(names: string[], obj: any) {
     return names.reduce<Record<string, any>>((pv, cv) => {
         pv[cv] = obj[cv]
         return pv
@@ -10,11 +30,17 @@ export function Component(cons: { new(): any, prototype: any }) {
     const slot = obtainSlot(cons.prototype)
     const sample = new cons
     const proto = cons.prototype
-    const methodNames = Object.getOwnPropertyNames(cons.prototype).filter(name => {
+    const LifecycleFunctions:Record<string,Function>={}
+    const methodNames = Object.getOwnPropertyNames(proto).filter(name => {
         if (name === 'constructor') {
             return false
         }
         if (typeof proto[name] === 'function') {
+            if(LifecycleNames.includes(name)){
+                LifecycleFunctions[name]=proto[name]
+                return false
+            }
+
             return true
         }
     })
@@ -23,9 +49,10 @@ export function Component(cons: { new(): any, prototype: any }) {
 
     const def = defineComponent({
         data() {
-            return makeObject(dataNames,sample)
+            return makeObject(dataNames, sample)
         },
-        methods: makeObject(methodNames,proto)
+        methods: makeObject(methodNames, proto),
+        ...LifecycleFunctions
     })
     return def as any
 

src/index.ts

@@ -1,6 +1,14 @@
 
 export { Component } from './component'
-import { ComponentInternalInstance, ComponentPublicInstance, Slots, nextTick, WatchOptions, WatchStopHandle } from 'vue'
+import {
+    ComponentInternalInstance,
+    ComponentPublicInstance,
+    Slots,
+    nextTick,
+    WatchOptions,
+    WatchStopHandle,
+
+} from 'vue'
 
 // export declare class Base {
 
@@ -38,4 +46,22 @@ export class Base {
     $nextTick!: typeof nextTick;
     $watch!: { (source: string | Function, cb: Function, options?: WatchOptions): WatchStopHandle };
 
+
+    beforeCreate?(): void;
+    created?(): void;
+    beforeMount?(): void;
+    mounted?():void;
+    beforeUpdate?(): void;
+    updated?(): void;
+    activated?(): void;
+    deactivated?(): void;
+    /** @deprecated use `beforeUnmount` instead */
+    beforeDestroy?(): void;
+    beforeUnmount?(): void;
+    /** @deprecated use `unmounted` instead */
+    destroyed?(): void;
+    unmounted?(): void;
+    renderTracked?(e: any): void;
+    renderTriggered?(e: any): void;
+    errorCaptured?(err: any, instance: ComponentPublicInstance | null, info: string): boolean | void;
 }