明天咱们来聊一聊 vue-property-decorator
官网链接：
https://www.npmjs.com/package...
来讲讲怎么用
vue-property-decorator 提供了装璜器，和 Mixin 性能。
装璜器
@Prop
父子组件通信传值的装璜器，跟未用 ts 版的 vue prop 组件传值一样
@Prop({ type: String, default: '' }) xxx!: string;@PropSync
与 @prop 相似，用于组件传值。不同的是，
1.@PropSync 装璜器接管两个参数：
propName：父组件传递过去的属性名；
options：与@Prop的第一个参数统一；
2.@PropSync 会生成一个新的计算属性
// 子组件 @PropSync('variate', { type: String, default: '' }) variate0!: string; variate0 为子组件应用变量// 父组件 :variate.sync="variate1" // variate1 为父组件所给变量小结：
@PropSync 的工作形式与 @Prop 相似，除了它承受propName作为装璜器的参数之外，它还在幕后创立了一个计算的getter和setter。这样你就能够像应用惯例的数据属性一样应用这个属性，同时也能够像在父组件中增加.sync修饰符一样简略。
@Component
在 ts 版本的vue中，@Component 装璜器代替了原来未用 ts 版本的 Component 页面援用组件 形式。
@Model
@Model装璜器容许咱们在一个组件上自定义 v-model，接管两个参数：
event: string 事件名；
options: 与@Prop的第一个参数统一；
@Model('change', { type: Boolean }) readonly checked!: boolean当父组件调用子组件去触发一个 change 事件并附带一个新的值的时候，这个值将会被更新到子组件
@ModelSync
@ModelSync装璜器可承受三个参数:
propName：类型名称；
event：事件名，string 类型；
options：与@Prop的第一个参数统一；
@ModelSync('checked', 'change', { type: Boolean }) readonly checkedValue!: boolean@Model @ModelSync 区别参考 @PropSync
@Watch
@Watch 装璜器接管两个参数：
1.path：被侦听的属性名；
2.options：能够蕴含两个属性
immediate?:boolean 侦听开始之后是否立刻调用该回调函数；
deep?:boolean 被侦听的对象的属性被扭转时，是否调用该回调函数；
@Watch('show', { immediate: true })onShow(value) { // 回调函数 // value 会去拿到 show 更新的值 console.log('value', value)}@Emit
官网解释：
由@Emit $装璜的函数会收回它们的返回值，前面跟着它们的原始参数。如果返回值是一个promise，它会在收回之前被解析。
如果事件名没有通过event参数提供，则应用函数名。在这种状况下，camelCase的名称将被转换为kebab-case。
简言之，被 @Emit 装璜器润饰的函数办法，会立刻调用想要 Emit 的办法。如果函数办法是异步，则异步发动前会被调用。如果 Emit 的参数名与以后的办法名一样，则 @Emit 无需传入参数，办法的驼峰命名会自动识别（转）为 短横线隔开式 命名（意思是 emit 定义的时候应用横杠命名，@Emit 能够应用对应的驼峰命名）。
用法：
@Emit() // emit 为 'add-to-count' addToCount(n: number) { this.count += n }@Emit('reset') resetCount() { this.count = 0 }@Provide
provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }容许一个先人组件向其所有子孙后代注入一个依赖，不管组件档次有多深
@ProvideReactive
@Provide和@Inject的响应式版本。如果父组件批改了所提供的值，那么子组件就能够捕捉到这个批改