feat: Mut装饰器支持shallow, customRef

Author: agileago

docs/index.md

@@ -8,7 +8,7 @@ features:
 - title: 类组件
   details: 功能与类型融为一体，无需多次声明类型，独立的属性类型声明，各种HOC组合轻而易举
 - title: 自动的依赖注入
-  details: 基于动态解析的 injection-js 依赖注入，让使用服务丝般自然
+  details: 基于动态解析的 injection-js 依赖注入，让使用服务丝般顺滑
 - title: vue3无ref编程
   details: 无需关注ref及其value，正常声明变量，编程体验更自然
 ---

example/api/http.ts

@@ -1,70 +1,73 @@
 import '@abraham/reflection'
-import { Component, Computed, Hook, Link, Mut, VueComponent } from 'vue3-oop'
-import { createApp, watchSyncEffect } from 'vue'
-import './theme/app.css'
-import { CountService } from './count.service'
-import { SizeService } from './size.service'
+import { Component, Computed, Hook, Mut, VueComponent, VueService } from 'vue3-oop'
+import { createApp } from 'vue'
 
-class Child extends VueComponent {
-  render() {
-    console.log('render')
-    return (
-      <div>
-        111
-        <div>{this.context.slots.default?.()}</div>
-      </div>
-    )
+const debounce = (delay: number) => {
+  let timeout: number | undefined
+  return (track: any, trigger: any) => {
+    let value: any
+    return {
+      get() {
+        track()
+        return value
+      },
+      set(newValue: any) {
+        clearTimeout(timeout)
+        timeout = window.setTimeout(() => {
+          value = newValue
+          trigger()
+        }, delay)
+      },
+    }
   }
 }
 
-@Component()
+class CountService extends VueService {
+  @Mut() count = 1
+}
+
 class Home extends VueComponent {
-  constructor(private countService: CountService, private sizeService: SizeService) {
-    super()
-    watchSyncEffect(() => this.count > 2)
-  }
+  @Mut(debounce(1000)) _count = ''
 
-  @Mut() count = 1
+  @Mut() obj = { name: 123 }
 
   @Computed()
   get double() {
-    return this.count * 2
+    return this._count
+  }
+  set double(val: string) {
+    this._count = val.toUpperCase()
   }
-  list = new Array(10).fill(1)
-
-  @Link() aaa: Child[]
 
   @Hook('Mounted')
   mounted() {
-    console.log(this.aaa)
+    console.log('mounted')
+  }
+
+  render() {
+    console.log(this.obj)
+    console.log('render')
+    return <input type="text" v-model={this.double} />
   }
+}
 
+@Component()
+class Home1 extends Home {
+  constructor(private cs: CountService) {
+    super()
+    console.log(cs)
+  }
+  @Mut() count1 = 111
   render() {
     return (
-      <div style={{ textAlign: 'center' }}>
-        <Child>
-          <div>11111</div>
-        </Child>
-        <h2>count: {this.countService.count}</h2>
-        <button onClick={() => this.countService.add()}>+</button>
-        <button onClick={() => this.countService.remove()}>-</button>
-        <p>
-          矩形大小： 宽度： {this.sizeService.x} 长度: {this.sizeService.y}
-        </p>
-        <div
-          ref={this.sizeService.target}
-          style={{
-            width: '100px',
-            height: '100px',
-            resize: 'both',
-            border: '1px solid #ccc',
-            overflow: 'scroll',
-          }}
-        ></div>
+      <div>
+        <h5 onClick={() => this.cs.count++}>{this.cs.count}</h5>
+        <h2 onClick={() => this.count1++}>1111{this.count1}</h2>
+        {super.render()}
       </div>
     )
   }
 }
 
-const app = createApp(Home)
+const app = createApp(Home1)
 app.mount('#app')