前言
众所周知vue2对于ts兼容不友好，而有项目为了兼容ie浏览器不能升级到vue3，这时候我们可以使用vue-property-decorator插件，实现vue2+ts的组合，本节我们就来学一下基础用法。
vue-property-decorator
vue-property-decorator用装饰器写代码，以此来更好地支持ts，并且该插件入手也非常简单，只要我们了解常用的几种装饰器就能上手项目。
@Component
安装依赖，配置好ts就能使用了，首先是导出组件，vue2中直接用export default导出组件，在该插件中用class类导出组件，并且用@Component将类转换为vue组件，@Component写法来自于vue-class-component，Component可以接受vue2原生属性，具体语法如下：
// class可以跟组件名 也可以省略
import { Vue, Component } from 'vue-property-decorator'
@Component({
name:'',
components:{},
...
})
export default class expends Vue{
}
注意@Component绝对不能省略。
private与public
在vue2中我们使用data与methods定义变量、方法，而在class中我们可以直接定义，并且默认定义的变量是public，如果我们只想在当前组件使用变量、方法用private定义成私有变量即可，这些都是class类的知识。
private count = 1
private add(){
this.count++
}
相当于
data(){
return{
count: 1
}
}
methods:{
add(){
this.count++
}
}
@VModel
vue中v-model给我们带来了极大的便利，但是我们props参数不能够直接用v-model，要想实现props双向绑定的效果，需要跟emit结合起来。@VModel装饰器能够将props变成响应式的，达到v-model的效果:
//跟ts结合起来
import { Vue, Component, VModel } from 'vue-property-decorator'
@Component
export default class Home extends Vue {
@VModel({ type: Number }) count!: number
}
// 在父组件使用
<Home v-model="count">
@Prop @PropSync
@VModel相当于props跟emit结合起来，单单想要props传参是就用@Prop：
...
export default class extends Vue {
@Prop({ type: Number }) count!: number
}
vue语法中props参数有sync修饰符，也能实现响应式参数，@PropSync就是sync修饰符的写法，它要比@Prop多一个参数：
export default class extends Vue {
@PropSync('count', { type: Number }) realCount!: number
}
@PropSync与@VModel效果类似，具体区分在于emit的调用，@PropSync用vue2语法写出来就是：
props: {
count: {
type: Number,
},
},
computed: {
realCount: {
get() {
return this.count
},
set(value) {
this.$emit('update:count', value)
},
},
},
而@VModel则是v-model的实现原理：
props: {
value: {
type: Number,
},
},
computed: {
count: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
},
},
},
get set
computed计算属性也是vue2常用语法，使用了该插件我们直接用get、set即可：
private lastName = '庆'
get name(){
return '国'+this.lastName
}
set name(value){
//改变值使用
}
@Watch
@watch就是vue2中的watch，接受两个参数，第一个参数为监听的值，另一个为配置项：
//函数必须在下面
@Watch('count', { immediate: true })
onChildChanged() {}
@Provide @Inject
provide与inject用于多层组件传参，对应的装饰器就是@Provide @Inject，注意传递的值不能主动转为响应式。
@Provide() a = 'a'
@Inject('b') b!: string
console.log(this.b)
如果我们想要传递的值变成响应式就用@ProvideReactive @InjectReactive传递，这两组语法是一样的。
@Ref @Emit
@Ref相当于ref的简写模式，而@Emit就是emit的简写模式：
到此常用的语法我们就介绍完了，整体下来，vue-property-decorator写出来的代码要比vue2的选项式API简单，甚至有点组合式API的意思。下面就是简单的一个demo：
总结
以上就是vue-property-decorator的简单用法，主要引入了装饰器这一用法，用了该插件我们可以初步体验下装饰器，也能认识到vue-class-component。
