feat: Ref重命名Mut

Author: agileago

docs/guide/api.md

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

docs/guide/component.md

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

docs/guide/service.md

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

docs/index.md

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

example/count.service.ts

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

example/example.tsx

@@ -1,4 +1,4 @@
-import { Autobind, Track, VueComponent, VueService } from 'vue3-oop'
+import { Autobind, Mut, 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))
   }
 
-  @Track() x = 0
-  @Track() y = 0
+  @Mut() x = 0
+  @Mut() y = 0
 
   @Autobind()
   private change(e: MouseEvent) {

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 { Track } from '@/decorators/track'
+import { Mut } from '@/decorators/mut'
 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()
   }
-  @Track() loading = false
-  @Track() model = {
+  @Mut() loading = false
+  @Mut() model = {
     name: '',
     pwd: '',
   }

example/module/auth/user.service.ts

@@ -1,4 +1,4 @@
-import { Hook, Track, VueService } from '@/index'
+import { Hook, Mut, VueService } from '@/index'
 import { Inject, Injectable } from 'injection-js'
 import { RouterService } from '../../router/router.service'
 import { AxiosInstance } from 'axios'
@@ -11,7 +11,7 @@ export class UserService extends VueService {
     this.guardHttp()
     this.guardRouter()
   }
-  @Track() token = ''
+  @Mut() token = ''
 
   private _requestGuard: number
 

example/size.service.ts

@@ -1,4 +1,4 @@
-import { Hook, Track, VueService } from 'vue3-oop'
+import { Hook, Mut, VueService } from 'vue3-oop'
 import { ref, watchEffect } from 'vue'
 import { debounce } from 'lodash-es'
 
@@ -21,8 +21,8 @@ export class SizeService extends VueService {
       this.debounceSet(entry.target.clientWidth, entry.target.clientHeight)
     }
   })
-  @Track() x = 0
-  @Track() y = 0
+  @Mut() x = 0
+  @Mut() y = 0
 
   debounceSet = debounce((x: number, y: number) => {
     this.x = x

src/decorators/track.ts renamed to src/decorators/mut.ts

@@ -2,9 +2,9 @@ import { ref } from 'vue'
 import { Hanlder } from '../type'
 import { getProtoMetadata } from '../helper'
 
-const MetadataKey = Symbol('Track')
+const MetadataKey = Symbol('Mut')
 
-export function Track(): PropertyDecorator {
+export function Mut(): PropertyDecorator {
   return function (target: any, key: string | symbol) {
     let list: (string | symbol)[] = Reflect.getMetadata(MetadataKey, target) || []
     list = list.slice()
@@ -32,14 +32,14 @@ function handler(targetThis: Record<any, any>) {
   }
 }
 
-export const TrackHandler: Hanlder = {
-  key: 'Track',
+export const MutHandler: Hanlder = {
+  key: 'Mut',
   handler,
 }
 
 /**
- * @deprecated 因与vue的ref冲突，故改名为 Track
+ * @deprecated 因与vue的ref冲突，故改名为 Mut
  */
 export function Ref() {
-  return Track()
+  return Mut()
 }

src/extends/component.ts

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance, getCurrentInstance, InjectionKey, provide, VNodeChild, VNodeProps } from 'vue'
 import { getEmitsFromProps, useCtx, useProps } from '../helper'
 import { Hanlder, VueComponentStaticContructor, WithSlotTypes, WithVModel, WithVSlots } from '../type'
-import { TrackHandler } from '../decorators/track'
+import { MutHandler } from '../decorators/mut'
 import { ComputedHandler } from '../decorators/computed'
 import { HookHandler } from '../decorators/hook'
 import { LinkHandler } from '../decorators/link'
@@ -19,7 +19,7 @@ export abstract class VueComponent<T extends {} = {}> {
   /** 热更新使用 */
   static __hmrId?: string
   /** 装饰器处理 */
-  static handler: Hanlder[] = [TrackHandler, ComputedHandler, LinkHandler, HookHandler]
+  static handler: Hanlder[] = [MutHandler, ComputedHandler, LinkHandler, HookHandler]
   /** 是否自定义解析组件 */
   static resolveComponent = resolveComponent
   static __vccOpts__value?: any

src/extends/service.ts

@@ -1,4 +1,4 @@
-import { TrackHandler } from '../decorators/track'
+import { MutHandler } from '../decorators/mut'
 import { ComputedHandler } from '../decorators/computed'
 import { HookHandler } from '../decorators/hook'
 import { provide } from 'vue'
@@ -8,7 +8,7 @@ import { LinkHandler } from '../decorators/link'
 export const ProviderKey = 'ProviderKey' as const
 
 export abstract class VueService {
-  static handler: Hanlder[] = [TrackHandler, ComputedHandler, LinkHandler, HookHandler]
+  static handler: Hanlder[] = [MutHandler, ComputedHandler, LinkHandler, HookHandler]
   public constructor() {
     const ThisConstructor = this.constructor as VueComponentStaticContructor
     if (ThisConstructor.ProviderKey) provide(ThisConstructor.ProviderKey, this)

src/index.ts

@@ -1,6 +1,6 @@
 export { VueComponent, GlobalStoreKey } from './extends/component'
 export { VueService, ProviderKey } from './extends/service'
-export { Ref, Track } from './decorators/track'
+export { Ref, Mut } from './decorators/mut'
 export { Computed } from './decorators/computed'
 export { Link } from './decorators/link'
 export { Hook } from './decorators/hook'