vue-property-decorator 使用学习

一、安装与使用
一般的，vue 项目中使用 TypeScript 时，会安装 vue-property-decorator 这个库，使用装饰器简化书写。
安装：

npm i -S vue-property-decorator

使用：

// 当在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样
<script lang="ts">
	// 按需引入自己需要的功能模块
	import {
    Component, Vue } from 'vue-property-decorator'

	@Component
	export default class App extends Vue {
   
    	name:string = 'Simon Zhang'
	    // computed
	    get MyName():string {
   
	    	return `My name is ${
     this.name}`
	    }
		// 钩子函数
		mounted() {
   
    		this.sayHello();
  		}
  		// methods
  		sayHello():void {
   
   			alert(`Hello ${
     this.name}`)
  		}
	}
</script>

二、具体用法
总的来说，vue-property-decorator 提供了以下的装饰器和功能：vue-property-decorator

• @Prop
• @PropSync
• @Model
• @ModelSync
• @Watch
• @Provide
• @Inject
• @ProvideReactive
• @InjectRactive
• @Emit
• @Ref
• @VModel
• @Component
• Mixins

1. @Prop(options: (PropOptions | Constructor[] | Constructor) = {})

@Prop装饰器接收一个参数，这个参数可以有三种写法：

• Constructor，例如String，Number，Boolean等，指定 prop 的类型；
• Constructor[]，指定prop 的可选类型；
• PropOptions，可以使用以下选项：type，default，required，validator。

注意：属性的 ts 类型后面需要加上 undefined 类型；或者在属性名后面加上!，表示非 null 和 非 undefined 的断言，否则编译器会给出错误提示。

import {
    Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
   
    @Prop(Number) readonly propA: number | undefined
    @Prop({
    default: 'default value' }) readonly propB!: string
    @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

2.@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})

@PropSync装饰器与@prop用法类似，二者的区别在于：

• @PropSync 装饰器接收两个参数：
  propName: string 表示父组件传递过来的属性名；
  options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致；
• @PropSync 会生成一个新的计算属性。

注意：使用 PropSync 的时候是要在父组件配合 .sync 使用的

// 父组件调用子组件（PropSyncComponent）
<PropSyncComponent :like.sync="like"></PropSyncComponent>

<script lang="ts">
import {
    Component, Prop, Vue, PropSync } from 'vue-property-decorator';
 
@Component
export default class PropSyncComponent extends Vue {
   
	// 接收父组件传值（like）并生成一个新的属性（syncedlike）
    @PropSync('like', {
    type: String }) syncedlike!: string; // 用来实现组件的双向绑定,子组件可以更改父组件穿过来的值
 
    editLike(