watcher array

Author: ruojianll

docs/en/class-component/watcher/code-usage.ts

@@ -17,6 +17,15 @@ Vue options API
 
             }
         }
+        property2:[{
+            handler:function property2Watcher1(newValue: string, oldValue: string){
+
+            }
+        },{
+            handler:function property2Watcher2(newValue: string, oldValue: string){
+
+            }
+        }]
     }
 }
 */
@@ -29,4 +38,13 @@ export default class MyComponent extends Vue {
     propertyWatcher(newValue: string, oldValue: string) {
 
     }
+
+    @Watch("property2")
+    property2Watcher1(newValue: string, oldValue: string) {
+
+    }
+    @Watch("property2")
+    property2Watcher2(newValue: string, oldValue: string) {
+
+    }
 }

docs/zh-cn/class-component/watcher/code-usage.ts

@@ -17,6 +17,15 @@ Vue options API
 
             }
         }
+        property2:[{
+            handler:function property2Watcher1(newValue: string, oldValue: string){
+
+            }
+        },{
+            handler:function property2Watcher2(newValue: string, oldValue: string){
+
+            }
+        }]
     }
 }
 */
@@ -29,4 +38,13 @@ export default class MyComponent extends Vue {
     propertyWatcher(newValue: string, oldValue: string) {
 
     }
+
+    @Watch("property2")
+    property2Watcher1(newValue: string, oldValue: string) {
+
+    }
+    @Watch("property2")
+    property2Watcher2(newValue: string, oldValue: string) {
+
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-facing-decorator",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Vue typescript class and decorator based component.",
   "main": "dist/index.js",
   "keywords": [

src/option/watch.ts

@@ -13,24 +13,34 @@ export function decorator(key: string, option?: Option) {
 
     return function (proto: any, name: string) {
         const slot = obtainSlot(proto)
-        let map = slot.obtainMap<Map<string, WatchConfig>>('watch');
+        let map = slot.obtainMap<Map<string, WatchConfig | WatchConfig[]>>('watch');
 
 
         const opt = Object.assign({}, option ?? {}, {
             key: key,
             handler: proto[name]
         })
-        map.set(name, opt)
+        if (map.has(key)) {
+            const t = map.get(key)!
+            if (Array.isArray(t)) {
+                t.push(opt)
+            } else {
+                map.set(key, [t, opt])
+            }
+        }
+        else {
+            map.set(key, opt)
+        }
     }
 }
 
 export function build(cons: Cons, optionBuilder: OptionBuilder) {
     optionBuilder.watch ??= {}
     const slot = obtainSlot(cons.prototype)
-    const names = slot.obtainMap('watch')
-    if (names) {
-        names.forEach(value => {
-            optionBuilder.watch![value.key] = value
+    const keys = slot.obtainMap('watch')
+    if (keys) {
+        keys.forEach((value, key) => {
+            optionBuilder.watch![key] = value
         })
     }
 

test/option/watch.ts

@@ -5,20 +5,31 @@ import { Component, Watch, Base } from '../../dist'
 
 @Component
 export class Comp extends Base {
-    
+
     @Watch('defaultWatchKey')
-    defaultWatcher(){
+    defaultWatcher() {
         return 'defaultWatcher test value'
     }
 
-    @Watch('fullWatchKey',{
-        deep:true,
-        immediate:true,
-        flush:'post'
+    @Watch('fullWatchKey', {
+        deep: true,
+        immediate: true,
+        flush: 'post'
     })
-    fullWatcher(){
+
+    fullWatcher() {
         return 'fullWatcher test value'
     }
+    @Watch('arrayWatchKey')
+    arrayWatcher1() {
+        return 'arrayWatcher1 value'
+    }
+    @Watch('arrayWatchKey', {
+        immediate: true
+    })
+    arrayWatcher2() {
+        return 'arrayWatcher2 value'
+    }
 }
 const CompContext = Comp as any
 
@@ -27,16 +38,21 @@ describe('decorator Watch',
         it('default', () => {
             expect('function').to.equal(typeof CompContext?.watch?.defaultWatchKey?.handler)
             expect('defaultWatcher test value').to.equal(CompContext.watch.defaultWatchKey.handler())
-   
+
         })
-        it('full option',()=>{
+        it('full option', () => {
             expect('function').to.equal(typeof CompContext?.watch?.fullWatchKey?.handler)
             expect('fullWatcher test value').to.equal(CompContext.watch.fullWatchKey.handler())
             expect(true).to.equal(CompContext.watch.fullWatchKey.deep)
             expect(true).to.equal(CompContext.watch.fullWatchKey.immediate)
             expect('post').to.equal(CompContext.watch.fullWatchKey.flush)
         })
-        it('method',()=>{
+        it('array', () => {
+            expect(true).to.equal(Array.isArray(CompContext?.watch?.arrayWatchKey))
+            expect('arrayWatcher1 value').to.equal(CompContext.watch.arrayWatchKey[0].handler())
+            expect(true).to.equal(CompContext.watch.arrayWatchKey[1].immediate)
+        })
+        it('method', () => {
             expect('function').to.equal(typeof CompContext?.methods?.defaultWatcher)
             expect('defaultWatcher test value').to.equal(CompContext.methods.defaultWatcher())
         })