# vue-ts-annotation

**Repository Path**: lp9906/vue-ts-annotation

## Basic Information

- **Project Name**: vue-ts-annotation
- **Description**: Vue常用注解汇总
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-24
- **Last Updated**: 2023-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, annotation

## README

# vue-ts-annotation
常用注解汇总

# 1. Loading 注解
执行注册`@LoadingIntercept`的函数时，执行函数的过程中会将注册`@Loading`的变量值临时修改为`true`;
```html
<template>
  <div>
    <button @click="excute">
      Loading
    </button>
    loading = {{ loading }}
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "kaygnas-vue-property-decorator";
import { Loading, LoadingIntercept } from "@/annotations/loading";
import sleep from "@/methods/sleep";

@Component({
  name: "Demo1",
})
export default class Demo1 extends Vue {
  @Loading()
  public loading: boolean = false;

  @LoadingIntercept()
  public async excute() {
    await sleep(300);
  }
}
</script>
```

# 2. 异常捕获注解
执行注册`@ErrorIntercept`的函数时发生异常的时候，会触发同阶段初始化注册`@ErrorReset`变量，以及运行同阶段注册`@ErrorPost`的后置触发函数
```html
<!-- annotation error -->
<template>
  <div>
    <button @click="submit">
      submit
    </button>
    <div>
      value={{ value }}
    </div>
    <div>
      errMessage={{ errMessage }}
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "kaygnas-vue-property-decorator";
import { ErrorReset, ErrorPost, ErrorIntercept } from "@/annotations/error-intercept";

@Component({
  name: "Demo2",
})
export default class Demo2 extends Vue {

  @ErrorReset("submit", () => [])
  public value: any[] = [1,2,3];

  public errMessage: string = "";
  @ErrorPost("submit")
  public async onSublitError(error: Error) {
    this.errMessage = error.message;
  }

  @ErrorIntercept("submit")
  public async submit() {
    throw new Error("执行失败");
  }
}
</script>

```

# 3. 确认框注解
执行注册`@ConfirmIntercept`的函数时会出现确认框，单击确认按钮后才会执行函数
```html
<!-- annotation confirm -->
<template>
  <div>
    <button @click="excute">
      Confirm
    </button>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "kaygnas-vue-property-decorator";
import { ConfirmIntercept } from "@/annotations/confirm-intercept";

@Component({
  name: "Demo3",
})
export default class Demo3 extends Vue {

  @ConfirmIntercept("执行")
  public excute() {
    alert("已执行");
  }
}
</script>
```

# 4. 数据校验注解
执行注册`@ValidateIntercept`的函数时，会先执行同阶段注册`@Validate`的校验函数
```html
<!-- annotation validate -->
<template>
  <div>
    <button @click="excute">
      validate submit
    </button>
    &nbsp;
    <button @click="count += 1">
      Add
    </button>
    <div>
      count={{ count }}
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "kaygnas-vue-property-decorator";
import { Validate, ValidateIntercept, ValidateError } from "@/annotations/validate";
import { ConfirmIntercept } from "@/annotations/confirm-intercept";
import { ErrorIntercept, MessageError } from "@/annotations/error-intercept";

@Component({
  name: "Demo4",
})
export default class Demo4 extends Vue {

  public count: number = 0;

  @Validate("checkCount")
  public checkCount() {
    if (this.count === 0) {
      throw new ValidateError("请添加数量")
    }
  }

  @ValidateIntercept("checkCount")
  @ConfirmIntercept("执行")
  @ErrorIntercept()
  public excute() {
    if (this.count < 3) {
      alert("执行成功");
    } else {
      throw new MessageError("执行数量过多");
    }
  }
}
</script>
```

# 5. 请求合并
执行注册`@RequestMerge`的异步函数时，会根据注解的第一个参数判断接口合并条件，多个接口调用只产生一次接口请求
```html
<!-- annotation RequestMerge -->
<template>
  <div>
    <button @click="excute">
      RequestMerge submit
    </button>
    <div>
      excuteCount={{ excuteCount }}
    </div>
    <div>
      requestCount={{ requestCount }}
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "kaygnas-vue-property-decorator";
import sleep from "@/methods/sleep";
import { RequestMerge } from "@/annotations/request-merge";

@Component({
  name: "Demo5",
})
export default class Demo5 extends Vue {

  public excuteCount: number = 0;

  public requestCount: number = 0;

  @RequestMerge(
    (id: number) => id + ""
  )
  public async requestApi(id: number) {
    await sleep(300);
    this.requestCount += 1;
    return id;
  }

  public excute() {
    this.requestApi(100);
    this.excuteCount += 1;
    this.requestApi(100);
    this.excuteCount += 1;
    this.requestApi(100);
    this.excuteCount += 1;
    this.requestApi(200);
    this.excuteCount += 1;
    this.requestApi(200);
    this.excuteCount += 1;
  }
}
</script>

```

# 6. 请求结果合并
# 7. 执行缓存
# 8. 请求批量缓存
# 9. 延期执行
执行注册`@Deferred`的函数时，将延期一段时间执行函数，如多次执行函数将重置延期时间
```html
<!-- annotation Deferred -->
<template>
  <div>
    <button @click="excute">
      Deferred Submit
    </button>
    <div>
      watchCount={{ watchCount }}
    </div>
    <div>
      triggerCount={{ triggerCount }}
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "kaygnas-vue-property-decorator";
import { Deferred } from "@/annotations/deferred";

@Component({
  name: "Demo9",
})
export default class Demo9 extends Vue {

  public count: number = 0;

  public watchCount: number = 0;

  public triggerCount: number = 0;

  public formData = { current: 1, size:20 };

  @Watch("formData.current")
  public onCurrentChange() {
    this.watchCount += 1;
    this.triggerFunc();
  }

  @Watch("formData.size")
  public onSizeChange() {
    this.watchCount += 1;
    this.triggerFunc();
  }

  @Deferred(33)
  public triggerFunc() {
    this.triggerCount += 1;
  }

  public excute() {
    const { current, size } = this.formData;
    this.formData = { current: current + 1, size: size + 1 };
  }
}
</script>
```
# 10. 防抖
# 11. 节流
# 12. 保障结果
执行注册`@Ensuring`的函数时，执行多次异步请求，只有最后一次才返回结果
```html
<!-- annotation Ensuring -->
<template>
  <div>
    <button @click="excute(1000)">
      Ensuring 1s
    </button>
    &nbsp;
    <button @click="excute(2000)">
      Ensuring 2s
    </button>
    &nbsp;
    <button @click="excute(3000)">
      Ensuring 3s
    </button>
    <div>
      result={{ result }}
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "kaygnas-vue-property-decorator";
import { Ensuring } from "@/annotations/ensuring";
import { ErrorIntercept } from "@/annotations/error-intercept";
import sleep from "@/methods/sleep";

@Component({
  name: "Demo12",
})
export default class Demo12 extends Vue {

  public result: number = null;

  @Ensuring()
  public async requestValue(timeout: number) {
    await sleep(timeout);
    return timeout;
  }

  @ErrorIntercept()
  public async excute(timeout: number) {
    this.result = await this.requestValue(timeout);
  }
}
</script>

```

# 其它
释放注解数据
```typescript
import reflectClearPlugin from "@/plugins/reflect-clear-plugin";
vue.use(reflectClearPlugin);
```