feat: Ref重命名Track

BREAKING CHANGE: Ref因与vue的Ref重名，故改名为Track

Author: agileago

README.md

@@ -36,12 +36,12 @@ pnpm add vue3-oop
 
 ### vite配置
 
-因为esbuild不支持装饰器的metadata属性，所以需要安装 [vite-plugin-ts](https://github.com/CarterLi/vite/tree/main/packages/plugin-vue-jsx#readme) 插件使用原始ts编译
+因为esbuild不支持装饰器的metadata属性，所以需要安装 [rollup-plugin-typescript2](https://github.com/ezolenko/rollup-plugin-typescript2) 插件使用原始ts编译
 
 ### 定义组件
 
 ```typescript jsx
-import { Autobind, ComponentProps, Computed, Hook, Link, Ref, VueComponent } from 'vue3-oop'
+import { Autobind, ComponentProps, Computed, Hook, Link, Track, VueComponent } from 'vue3-oop'
 import { Directive, VNodeChild, watch } from 'vue'
 
 const focusDirective: Directive = {
@@ -78,7 +78,7 @@ class Foo extends VueComponent<Foo_Props> {
   }
 
   // 组件自身状态
-  @Ref() count = 1
+  @Track() count = 1
 
   // 计算属性
   @Computed()
@@ -127,7 +127,7 @@ class Foo extends VueComponent<Foo_Props> {
 
 ```typescript
 class CountService extends VueService {
-  @Ref() count = 1
+  @Track() count = 1
   add() {
     this.count++
   }

docs/guide/api.md

@@ -12,14 +12,14 @@
 
 # 装饰器
 
-## Ref
+## Track
 - Type: 属性装饰器
 
 声明变量为响应式
 
 ```tsx
 class Foo extends VueComponent {
-  @Ref() count = 1
+  @Track() count = 1
 }
 ```
 
@@ -30,7 +30,7 @@ class Foo extends VueComponent {
 
 ```tsx
 class Foo extends VueComponent {
-  @Ref() count = 1
+  @Track() count = 1
 
   @Computed()
   get doubleCount() {

docs/guide/component.md

@@ -71,12 +71,12 @@ class Foo extends VueComponent {
 
 ## 响应式变量
 
-响应式变量使用装饰器注解一下，主要有2个 `Ref` 和 `Computed`,此时忘记 `.value` 的事情，
+响应式变量使用装饰器注解一下，主要有2个 `Track` 和 `Computed`,此时忘记 `.value` 的事情，
 就是正常普通的变量定义，加上装饰器就是告诉框架当此变量变化的时候我要刷新视图
 
 ```tsx
 class Foo extends VueComponent {
-  @Ref() count = 1
+  @Track() count = 1
 
   @Computed()
   get doubleCount() {
@@ -123,7 +123,7 @@ class Foo extends VueComponent {
     watch(() => this.count, (n, o) => console.log('change', n, o))
   }
 
-  @Ref() count = 1
+  @Track() count = 1
 
   render() {
     return <span onClick={() => this.count++}>{this.count}</span>

docs/guide/di.md

@@ -16,7 +16,7 @@ import { Injectable } from 'injection-js'
 // 定义服务 加上此装饰器表明我有需要其他服务，如果不需要，可以不加
 @Injectable()
 class CountService extends VueService {
-  @Ref() count = 1
+  @Track() count = 1
 
   add() {
     this.count++
@@ -46,7 +46,7 @@ import { VueComponent } from './component'
 import { SkipSelf } from 'injection-js'
 
 class CountService extends VueService {
-  @Ref() count = 1
+  @Track() count = 1
 
   add() {
     this.count++

docs/guide/service.md

@@ -38,8 +38,8 @@ class PositionService extends VueService {
     onBeforeUnmount(() => window.removeEventListener('mousemove', this.change))
   }
 
-  @Ref() x = 0
-  @Ref() y = 0
+  @Track() x = 0
+  @Track() y = 0
 
   @Autobind()
   private change(e: MouseEvent) {

docs/index.md

@@ -39,7 +39,7 @@ class Foo extends VueComponent<Foo_Props> {
   }
 
   // 组件自身状态
-  @Ref() count = 1
+  @Track() count = 1
 
   // 计算属性
   @Computed()

example/count.service.ts

@@ -1,7 +1,7 @@
-import { Autobind, Ref, VueService } from '@/index'
+import { Autobind, Track, VueService } from '@/index'
 
 export class CountService extends VueService {
-  @Ref() count = 0
+  @Track() count = 1
 
   @Autobind()
   add() {

example/example.tsx

@@ -1,4 +1,4 @@
-import { Autobind, Ref, VueComponent, VueService } from 'vue3-oop'
+import { Autobind, Track, VueComponent, VueService } from 'vue3-oop'
 import { onBeforeUnmount } from 'vue'
 
 class PositionService extends VueService {
@@ -8,8 +8,8 @@ class PositionService extends VueService {
     onBeforeUnmount(() => window.removeEventListener('mousemove', this.change))
   }
 
-  @Ref() x = 0
-  @Ref() y = 0
+  @Track() x = 0
+  @Track() y = 0
 
   @Autobind()
   private change(e: MouseEvent) {

example/main.tsx

@@ -3,10 +3,11 @@ import { Component, VueComponent } from 'vue3-oop'
 import { createApp } from 'vue'
 import './theme/app.css'
 import { CountService } from './count.service'
+import { SizeService } from './size.service'
 
 @Component()
 class Home extends VueComponent {
-  constructor(private countService: CountService) {
+  constructor(private countService: CountService, private sizeService: SizeService) {
     super()
   }
 
@@ -16,6 +17,19 @@ class Home extends VueComponent {
         <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>
     )
   }

example/module/auth/login.view.tsx

@@ -1,7 +1,7 @@
 import { Component, VueComponent } from '@/index'
 import { UserService } from './user.service'
 import { Button, Col, Form, Input, Row } from 'ant-design-vue'
-import { Ref } from '@/decorators/ref'
+import { Track } from '@/decorators/track'
 import { CatchLoading } from '../../common/decorators/catch.decorator'
 import { Autobind } from '@/helper'
 import { CountService } from '../../count.service'
@@ -19,8 +19,8 @@ export default class LoginView extends VueComponent {
   ) {
     super()
   }
-  @Ref() loading = false
-  @Ref() model = {
+  @Track() loading = false
+  @Track() model = {
     name: '',
     pwd: '',
   }