vue-property-decorator使我們能在vue組件中寫TypeScript語法，依賴於vue-class-component
裝飾器：@Component、@Prop、@PropSync、@Model、@ModelSync、@Watch、@Emit、@Ref、@Provide、@Inject、@ProvideReactive、@InjectReactive、@VModel
@Component({})可以聲明components、filter、directives等未提供裝飾器的vue選項，也可以聲明computed、watch、路由守衛函數(beforeRouteEnter、beforeRouteLeave)等
Component.registerHooks(['beforeRouteEnter', 'beforeRouteLeave'])全局注冊路由守衛函數
computed在class類中寫法：get name(){return '';}
@Prop()參數為prop的類型聲明，屬性的類型聲明需要加上undefined類型或者在屬性名后面加上!來斷言非null和非undefined
@Prop(String) name!: string | undefined;
@Prop([String, Number]) count!: string | number;
@Prop({type: Number, default: 0, (required、validator)}) age!: number;
@Prop() private name!: string;
@PropSync()接收兩個參數：參數一為父組件傳遞過來的屬性名，參數二同@Prop的參數，聲明類型，@PropSync會生成一個新的計算屬性
在父組件上屬性傳遞需在屬性后面加上.sync修飾符(:name.sync="name")
子組件中@PropSync('name', {type: String}) newName!: string;
子組件中值發生變化會雙向綁定修改父組件的值
@Model()在組件上自定義v-model語法糖，接收兩個參數event: string事件名，options同@Prop的參數
@Model('change', {type: string}) readonly name!: string;
@ModelSync()語法用法同@Model，不同的是接收三個參數，參數一為父組件應用處傳遞的參數名，參數二為event事件名，參數三為options，@ModelSync()生成返回一個新的雙向綁定計算屬性
@ModelSync('checked', 'change', {type: Boolean})
readonly checkedValue!: boolean;
@Watch()接收兩個參數，參數一為監聽的屬性名，參數二為一個對象
{immediate?: boolean, deep?: boolean}第一個表示監聽開始后是否立即調用回調函數，第二個表示監聽的屬性變化時是否調用回調函數
@Watch('name')
onNameChanged(newVal: string, oldVal: string){}
@Emit()接收一個可選參數為第一個廣播的事件名參數，如果沒有提供該參數會將回調函數名的駝峰寫法轉化為中划線的寫法作為廣播觸發的事件名
@Emit會將回調函數的返回值作為第二個參數，如果返回值為一個Promise對象，emit會在Promise-resolved后觸發
@Emit('del') private delEmit(e: MouseEvent){}
@Emit()//省略參數將使用回調函數名，轉化為中划線@add-data
addData(data: any){return '';}//如果此處不return，則使用函數參數data
@Ref()可選參數指向模板中的ref屬性值，如果沒有提供則使用裝飾器后面的屬性名作為參數
@Ref('ruleForm') private ref!: any;
@Ref('btn') readonly btnRef!: HTMLButtonElement;
@Provide、@Inject、@ProvideReactive、@InjectReactive提供了父子組件、多層嵌套組件以及兄弟組件數據傳遞的方法
父組件中通過Provide傳遞數據：
@Provide('foo') foo = 'foo';
子組件中通過Inject獲取數據：
@Inject() private foo!: string;
@ProvideReactive、@InjectReactive響應式注入，配對使用
@VModel
@VModel({type: String}) name!: string;
等價於js中
export default {
props: {
value: {
type: String
}
},
computed: {
name: {
get(){return this.value;},
set(value){this.$emit('input', value);}
}
}
}