feat: hook支持绑定多个

Author: agileago

example/main.tsx

@@ -1,5 +1,5 @@
 import '@abraham/reflection'
-import { createCurrentInjector, Mut, VueComponent } from 'vue3-oop'
+import { createCurrentInjector, Hook, Mut, VueComponent } from 'vue3-oop'
 import { createApp } from 'vue'
 import 'ant-design-vue/dist/antd.css'
 import { Layout, Menu } from 'ant-design-vue'
@@ -10,6 +10,16 @@ import { routes } from './router/routes'
 class App extends VueComponent {
   injector = createCurrentInjector([RouterStartService])
   @Mut() collapsed = false
+
+  @Hook('BeforeMount')
+  before() {
+    console.log(222)
+  }
+
+  @Hook(['Mounted', 'BeforeMount'])
+  mounted() {
+    console.log(111)
+  }
   render() {
     return (
       <Layout style={{ minHeight: '100vh' }}>

src/decorators/hook.ts

@@ -29,57 +29,70 @@ type Lifecycle =
   | 'RenderTriggered'
   | 'ServerPrefetch'
 
-export const Hook: HookDecorator = createDecorator('Hook')
+export const Hook: HookDecorator = createDecorator('Hook', true)
 
 export interface HookDecorator {
-  (lifecycle: Lifecycle): MethodDecorator
+  (lifecycle: Lifecycle | Lifecycle[]): MethodDecorator
   MetadataKey: string | symbol
 }
 
 function handler(targetThis: any) {
-  const list = getProtoMetadata<Lifecycle>(targetThis, Hook.MetadataKey)
-  if (!list || !list.length) return
+  const list = getProtoMetadata<(Lifecycle | Lifecycle[])[]>(
+    targetThis,
+    Hook.MetadataKey
+  )
+  if (!list?.length) return
   for (const item of list) {
     let vueFn: any
-    switch (item.options) {
-      case 'BeforeMount':
-        vueFn = onBeforeMount
-        break
-      case 'Mounted':
-        vueFn = onMounted
-        break
-      case 'BeforeUpdate':
-        vueFn = onBeforeUpdate
-        break
-      case 'Updated':
-        vueFn = onUpdated
-        break
-      case 'BeforeUnmount':
-        vueFn = onBeforeUnmount
-        break
-      case 'Unmounted':
-        vueFn = onUnmounted
-        break
-      case 'Activated':
-        vueFn = onActivated
-        break
-      case 'Deactivated':
-        vueFn = onDeactivated
-        break
-      case 'ErrorCaptured':
-        vueFn = onErrorCaptured
-        break
-      case 'RenderTracked':
-        vueFn = onRenderTracked
-        break
-      case 'RenderTriggered':
-        vueFn = onRenderTriggered
-        break
-      case 'ServerPrefetch':
-        vueFn = onServerPrefetch
-        break
+    const doneLife: Record<string, true> = {}
+    const options = item.options.slice()
+    for (const option of options) {
+      if (Array.isArray(option)) {
+        options.push(...option)
+        continue
+      }
+      if (doneLife[option]) continue
+      switch (option) {
+        case 'BeforeMount':
+          vueFn = onBeforeMount
+          break
+        case 'Mounted':
+          vueFn = onMounted
+          break
+        case 'BeforeUpdate':
+          vueFn = onBeforeUpdate
+          break
+        case 'Updated':
+          vueFn = onUpdated
+          break
+        case 'BeforeUnmount':
+          vueFn = onBeforeUnmount
+          break
+        case 'Unmounted':
+          vueFn = onUnmounted
+          break
+        case 'Activated':
+          vueFn = onActivated
+          break
+        case 'Deactivated':
+          vueFn = onDeactivated
+          break
+        case 'ErrorCaptured':
+          vueFn = onErrorCaptured
+          break
+        case 'RenderTracked':
+          vueFn = onRenderTracked
+          break
+        case 'RenderTriggered':
+          vueFn = onRenderTriggered
+          break
+        case 'ServerPrefetch':
+          vueFn = onServerPrefetch
+          break
+      }
+      doneLife[option] = true
+      vueFn(() => targetThis[item.key]())
     }
-    vueFn(() => targetThis[item.key]())
   }
 }
 

src/decorators/util.ts

@@ -10,17 +10,21 @@ export interface MetadataStore<T> {
   desc?: PropertyDescriptor | null
 }
 
-export function createDecorator<T = void>(name: string) {
+export function createDecorator<T = void>(name: string, allowRepeat = false) {
   const metaName = `VUE3-OOP_${name.toUpperCase()}`
   const MetadataKey = createSymbol(metaName)
   const decoratorFn: DecoratorFn<T> = function (options: T) {
     return function (target: any, key: string | symbol) {
-      let list: MetadataStore<T>[] =
+      let list: MetadataStore<T | T[]>[] =
         Reflect.getMetadata(MetadataKey, target) || []
       list = list.slice()
       const hasItem = list.find((k) => k.key === key)
-      if (!hasItem) list.push({ key, options })
-      else hasItem.options = options
+      if (!hasItem) {
+        list.push({ key, options: allowRepeat ? [options] : options })
+      } else {
+        if (!allowRepeat) hasItem.options = options
+        else if (Array.isArray(hasItem.options)) hasItem.options.push(options)
+      }
       Reflect.defineMetadata(MetadataKey, list, target)
     }
   }