ts 版 vue 之 vue-property-decorator vue.js前端

今天我们来聊一聊 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 事件并附带一个新的值的时候，这个值将会被更新到子组件
【ts 版 vue 之 vue-property-decorator】@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 可以使用对应的驼峰命名）。
用法：