web-decorator-vue

vue-ts 装饰器/注解库

vue3 + typeScript 装饰器/注解库，让代码更加简洁，让开发更加简单。

示例 demo / 从 0创建一个项目

示例代码
从0新建一个项目

安装

npm i -S web-decorator-vue

请看示例demo 的配置进行操作。

• 注意: 一定要在 ts+vue3 环境下使用。

支持哪些功能

• ✅ @Component
• ✅ @Computed
• ✅ @Emit
• ✅ @Prop
• ✅ @Setup
• ✅ @VueHook
• ✅ @Watch

等价转换

• @Component()

@Component({
  components: {
    SubComponent
  }
})
export default class HomeView implements VueHooks{
  // TODO 代码区域
}

等价于js

export default {
  components:{
    SubComponent
  },
}

• @Computed()

@Computed()
getComputed1() {
  return this.message;
}

等价于js

export default{
    computed:{
        getComputed1(){
            return this.message;
        }
    }
}

• @Emit()

@Emit("bs-ok")
bsOK() {
  return this.temp2;
}
//示例2 带参数传递
@Emit("bs-ok")
bsOK(temp:string) {
  // TODO 业务代码块
  return temp;
}
//示例3 多参数传递
@Emit("bs-ok")
bsOK(temp1:Object,temp2:string...) {
  // TODO 业务代码块
  // 返回类型为任意类型，此处为数组。
  return [temp1,temp2,...];
}

等价于js

bsOK() {
  this.$emit("bs-ok",this.temp2);
}
//示例2
bsOK(temp) {
  // 业务代码块  
  this.$emit("bs-ok",temp);
}
//示例3
bsOK(temp) {
    // 业务代码块  
    this.$emit("bs-ok",temp);
}
//示例4
bsOK(temp1,temp2...) {
    // 业务代码块  
    this.$emit("bs-ok",[temp1,temp2...]);
}

• @Prop()

@Prop({type: String, required: true, default: '测试'})
temp1!: string;
@Prop({type: Number, default: 0})
temp2!: number;
@Prop(Number)
temp3!: number;
@Prop(String)
temp4!: number;

等价于js

export default {
    props: {
        temp1: {type: String, required: true, default: '测试'},
        temp2: {type: Number, default: 0},
        temp3: Number,
        temp4: String
    }
} 

• @Setup

// ts
@Setup("h3")
h3!: HTMLParagraphElement;
// html
<h3 ref="h3">父组件</h3>
// 测试案例
@VueHook()
mounted() {
  console.log(this.h3)
  // 控制台会打印 <h3>...</h3>
}

// js
export default {
  setup() {
    const h3 = ref(null)
    // ...
    return {
      h3
    }
  }
}
// html
<h3 ref="h3">父组件</h3>

• @VueHook()

// 注意 mounted 的名称一定要和vue选项api名称一致，并且要添加VueHook装饰器。
@VueHook()
mounted() {
  console.log("mounted");
}
// 注意 created 的名称一定要和vue选项api名称一致，并且要添加VueHook装饰器。
@VueHook()
created() {
  console.log("created")
}

等价于js

export default {
    mounted() {
        console.log("mounted");
    },
    created(){
        console.log("created");
    }
}

• @Watch()

@Watch("message")
onMessage(newVal: any, oldVal: any) {
  console.log(newVal);
  console.log(oldVal);
}

@Watch("nested", {
  deep: true,
  immediate: true,
})
onNested(newVal: any, oldVal: any) {
  console.log(newVal);
  console.log(oldVal);
}

等价于js

export default{
    watch:{
        "message":function (newVal, oldVal) {
            console.log(newVal);
            console.log(oldVal);
        },
        "nested":{
            handler:function (newVal, oldVal){
                console.log(newVal);
                console.log(oldVal);
            },
            deep: true,
            immediate: true,
        }
    }
}

示例代码片段（伪代码，请以demo为准）

import SubComponent from "@/components/sub-component/sub-component.vue";
import {Component, Computed, VueHook, VueHooks, Watch} from "web-decorator-vue";
@Component({
  components: {
    SubComponent
  }
})
export default class HomeView implements VueHooks {
  /**
   * mounted 生命周期
   */
  @VueHook()
  mounted() {
    console.log("mounted");
  }

  /**
   * Computed 示例
   */
  @Computed()
  getComputed1() {
    return this.message;
  }

  /**
   * Watch 示例
   * @param newVal
   * @param oldVal
   */
  @Watch("message", {
    deep: true,
    immediate: true,
  })
  onMessage(newVal: any, oldVal: any) {
    console.log(newVal);
    console.log(oldVal);
  }
  /**
   * Prop 示例
   */
  @Prop({type: Number, default: 0})
  temp2!: number;

  /**
   * Emit 示例
   */
  @Emit("bs-ok")
  bsOK() {
    return this.temp2;
  }

  /**
   * Setup 示例
   */
  @Setup("h3")
  h3!: HTMLParagraphElement;
}

<!-- HomeView.vue 代码-->
<template>
    ...
</template>
<script lang="ts" src="./HomeView.ts"></script>

联系我们

QQ群 729694111

License

MIT License