vue2中使用vue-property-decorator跟TS整合，用类的方式编写组件

一、前言

Vue.js 是一个非常受欢迎的前端框架，它能够快速构建交互性强的单页面应用。而 vue-property-decorator 是一个用于 Vue.js 的装饰器库，可以帮助我们更方便地编写 Vue.js 组件。下面来详细讲解 vue-property-decorator 的用法。

vue-class-component 是 vue 的官方库，作用是用类的方式编写组件，这种编写方式可以让 .vue 文件的 js 结构更扁平化，并使 vue 组件可以使用继承、混入等高级特性。

目前 2.x 跟 TS 的整合，通常需要基于 vue-class-component 来用基于 class 的组件书写方式

vue英文官网推荐了一个叫vue-class-component的包，可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利：
官方文档：https://class-component.vuejs.org/

vue-property-decorator是社区出的
官网 https://www.npmjs.com/package/vue-property-decorator
vue-property-decorator使我们能在vue组件中写TypeScript语法

vue-property-decorator深度依赖了vue-class-component拓展出了更多操作符 @Prop @Model @Watch @Provide @Inject @Emit等
可以说是 vue-property-decorator是 vue-class-component的一个超集
正常开发的时候，你只需要使用vue-property-decorator中提供的操作符即可不用再从vue-class-componen引入 vue、component

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

二、安装

1、原项目安装

npm i -S vue-class-component
npm i -S vue-property-decorator

2、使用 vue-cli 搭建新项目

vue create hello-world
选择 “Manually select features” 来手动选择特性，
勾选上 TypeScript（因为要使用装饰器语法）
勾选 “Use class-style component syntax?”

三、使用

1、基本写法

template和css的写法不变，只是script内的写法需要注意

<script lang='ts'>
import {Component, Vue} from vue-property-decorator;
@Component
export default class App extends Vue {

};
</script>

lang=“ts”：script声明当前语言是ts
@Component：注明此类为一个vue组件
App 组件名称
export default class Test extends Vue： export当前组件类是继承vue的

2、@component

@Component({})可以声明components、filter、directives等未提供装饰器的vue选项，也可以声明computed、watch、路由守卫函数(beforeRouteEnter、beforeRouteLeave)等

即使没有组件也不能省略@Component，否则会报错。

<template>
  <div>
    <componentA></componentA>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { componentA } from "@/components";

@Component({
  //组件
  components: {
    componentA,
  },
})
export default class HelloWorld extends Vue {
    
}
</script>

3、Data属性

data属性初始化可以被声明为类的属性。

<template>
  <div>{{ message }}</div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

// 即使没有组件也不能省略@Component
@Component({})
export default class HelloWorld extends Vue {
  // 定义的变量
  message: string = "Hello World!";
}
</script>

4、Methods属性

组件方法可以直接声明为类的原型方法：

<template>
  <button v-on:click="hello">Click</button>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({})
export default class HelloWorld extends Vue {
  // 方法
  hello() {
    console.log("Hello World!");
  }
}
</script>

5、Computed 计算属性

计算属性可以声明为类属性getter/setter：
对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可

<template>
  <input v-model="name" />
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({})
export default class HelloWorld extends Vue {
  // 定义的变量
  firstName: string = "John";
  lastName: string = "Doe";

  // 计算属性
  get name() {
    return this.firstName + " " + this.lastName;
  }
  // 计算属性
  set name(value) {
    const splitted = value.split(" ");
    this.firstName = splitted[0];
    this.lastName = splitted[1] || "";
  }
}
</script>

6、@Watch

@Watch使用非常简单,接受第一个参数为要监听的属性名第二个属性为可选对象
{immediate?: boolean, deep?: boolean}第一个表示监听开始后是否立即调用回调函数，第二个表示监听的属性变化时是否调用回调函数

<template>
  <button v-on:click="hello">Click</button>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";

@Component({})
export default class HelloWorld extends Vue {
  // 侦听器
  @Watch("message", { immediate: true, deep: true })
  onChangeValue(newVal: string, oldVal: string) {}

  // 定义的变量
  message: string = "Hello World!";

  // 方法
  hello() {
    this.message = "This is an test page!";
  }
}
</script>

7、@Prop

子组件接收父组件传参
@Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型
// 高阶函数接受参数，兼容以下写法

@Prop(String) name!: string | undefined;
@Prop([String, Number]) count!: string | number;
@Prop({type: Number, default: 0, (required、validator)}) age!: number;
@Prop() private name!: string;

//父组件HomeView.vue
<template>
  <div>
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";

@Component({
  //组件
  components: {
    HelloWorld,
  },
})
export default class HomeView extends Vue {}
</script>

//子组件HelloWorld.vue
<template>
  <div>
    {{ msg }}
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({})
export default class HelloWorld extends Vue {
  // 父组件传递的参数
  //这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值
  @Prop({ type: String, default: "" }) msg!: string;
}
</script>

8、@Emit

@Emit会将回调函数的返回值作为第二个参数，如果返回值为一个Promise对象，emit会在Promise-resolved后触发

@Emit(‘del’) private delEmit(e: MouseEvent){}
@Emit()//省略参数将使用回调函数名，转化为中划线@add-data
addData(data: any){return ‘’;}//如果此处不return，则使用函数参数data

//父组件HomeView.vue
<template>
  <div>
    <HelloWorld @editHandleEmit="editHandle" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";

@Component({
  //组件
  components: {
    HelloWorld,
  },
})
export default class HomeView extends Vue {
  // 方法
  editHandle(row: any) {
    console.log(row);
  }
}
</script>

//子组件HelloWorld.vue
<template>
  <div>
    <button v-on:click="editHandle">Click</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";

@Component({})
export default class HelloWorld extends Vue {
  // 定义的变量
  count: number = 0;
  
  // Emit方法
  @Emit("editHandleEmit")
  private editHandle() {
    return this.count;
  }
}
</script>

9、Mixins

Vue类组件提供了mixins辅助功能，以类样式方式使用mixins。通过使用mixins帮助程序，TypeScript可以推断混合类型并在组件类型上继承它们。

注意：所有mixin必须声明为类组件。

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';

//定义vue/type/vue模块
declare module 'vue/types/vue' {
    interface Vue {
        value: string;
    }
}

@Component
export default class myMixins extends Vue {
    // 定义的变量
    value: string = 'Hello'
}

//页面HelloWorld.vue
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from './mixins';

@Component({
    //混入
    mixins: [myMixins]
})
export default class myComponent extends Vue {
    // 生命周期
    created() {
        console.log(this.value) // => Hello
    }
}