在Vue中使用TypeScript時，非常好用的一個庫，使用裝飾器來簡化書寫。
一、安裝
npm?i?-S?vue-property-decorator
@Prop@PropSync@Provide@Model@Watch@Inject@Provide@Emit@Component?(provided by?vue-class-component)Mixins?(the helper function named?mixins?provided by?vue-class-component)
二、用法
1、@Component(options:ComponentOptions = {})
@Component 裝飾器可以接收一個對象作為參數，可以在對象中聲明?components ，filters，directives 等未提供裝飾器的選項
雖然也可以在?@Component 裝飾器中聲明?computed，watch 等，但并不推薦這么做，因為在訪問?this 時，編譯器會給出錯誤提示
即使沒有組件也不能省略@Component，否則會報錯。
import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';@Component({components:{componentA,componentB,},directives: {focus: {// 指令的定義inserted: function (el) {el.focus()}}}
})
export default class YourCompoent extends Vue{}2、@Prop(options: (PropOptions | Constructor[] | Constructor) = {})?
父子組件之間值的傳遞
@Prop 裝飾器接收一個參數，這個參數可以有三種寫法：
- Constructor ，例如?String，Number，Boolean 等，指定?prop 的類型；
- Constructor[] ，指定?prop 的可選類型；
- PropOptions ，可以使用以下選項：?type，default，required，validator 。
| ? |
import { Vue, Component, Prop } from 'vue-property-decorator'@Componentexport default class MyComponent extends Vue {@Prop(String) propA: string | undefined@Prop([String, Number]) propB!: string | number@Prop({type: String,default: 'abc'})propC!: string}等同于下面的?js 寫法
export default {props: {propA: {type: Number},propB: {default: 'default value'},propC: {type: [String, Boolean]}}
}注意：
- 屬性的ts類型后面需要加上?undefined 類型；或者在屬性名后面加上!，表示?非null 和?非undefined的斷言，否則編譯器會給出錯誤提示；
- 指定默認值必須使用上面例子中的寫法，如果直接在屬性名后面賦值，會重寫這個屬性，并且會報錯。
3、@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
- @PropSync 裝飾器與?@prop 用法類似，二者的區別在于：
- @PropSync 裝飾器接收兩個參數：?
propName: string 表示父組件傳遞過來的屬性名；?
options: Constructor | Constructor[] | PropOptions 與?@Prop 的第一個參數一致；
@PropSync 會生成一個新的計算屬性。
import { Vue, Component, PropSync } from 'vue-property-decorator'@Componentexport default class MyComponent extends Vue {@PropSync('propA', { type: String, default: 'abc' }) syncedPropA!: string}等同于下面的?js 寫法
export default {props: {propA: {type: String,default: 'abc'}},computed: {syncedPropA: {get() {return this.propA},set(value) {this.$emit('update:propA', value)}}}
}注意：?@PropSync 需要配合父組件的?.sync 修飾符使用
?
在說vue 修飾符sync前，我們先看下官方文檔：vue .sync 修飾符，里面說vue .sync 修飾符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 發布之后的實際應用中，我們發現 .sync 還是有其適用之處，比如在開發可復用的組件庫時。我們需要做的只是讓子組件改變父組件狀態的代碼更容易被區分。從 2.3.0 起我們重新引入了 .sync 修飾符，但是這次它只是作為一個編譯時的語法糖存在。它會被擴展為一個自動更新父組件屬性的 v-on 監聽器。
示例代碼如下：
<comp :foo.sync="bar"></comp>
會被擴展為：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：
this.$emit('update:foo', newValue)4、@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})
@Model 裝飾器允許我們在一個組件上自定義?v-model ，接收兩個參數：
event: string 事件名。
options: Constructor | Constructor[] | PropOptions 與?@Prop 的第一個參數一致。
import { Vue, Component, Model } from 'vue-property-decorator'@Componentexport default class MyInput extends Vue {@Model('change', { type: String, default: '123' }) value!: string}等同于下面的?js 寫法
export default {model: {prop: 'value',event: 'change'},props: {value: {type: String,default: '123'}}
}上面例子中指定的是?change 事件，所以我們還需要在?template 中加上相應的事件：
<template><inputtype="text":value="value"@change="$emit('change', $event.target.value)"/></template>對?自定義v-model 不太理解的同學，可以查看?自定義事件
?
5、@Watch(path: string, options: WatchOptions = {})
@Watch 裝飾器接收兩個參數：
path: string 被偵聽的屬性名；
options?: WatchOptions={} options 可以包含兩個屬性 ：
immediate?:boolean 偵聽開始之后是否立即調用該回調函數；
deep?:boolean 被偵聽的對象的屬性被改變時，是否調用該回調函數；
偵聽開始，發生在?beforeCreate 勾子之后，?created 勾子之前
import { Vue, Component, Watch } from 'vue-property-decorator'@Componentexport default class MyInput extends Vue {@Watch('msg')onMsgChanged(newValue: string, oldValue: string) {}@Watch('arr', { immediate: true, deep: true })onArrChanged1(newValue: number[], oldValue: number[]) {}@Watch('arr')onArrChanged2(newValue: number[], oldValue: number[]) {}}等同于下面的?js 寫法
export default {watch: {msg: [{handler: 'onMsgChanged',immediate: false,deep: false}],arr: [{handler: 'onArrChanged1',immediate: true,deep: true},{handler: 'onArrChanged2',immediate: false,deep: false}]},methods: {onMsgVhanged(newValue, oldValue) {},onArrChange1(newValue, oldValue) {},onArrChange2(newValue, oldValue) {}}
}6、@Emit(event?: string)
- @Emit 裝飾器接收一個可選參數，該參數是?$Emit 的第一個參數，充當事件名。如果沒有提供這個參數，?$Emit 會將回調函數名的?camelCase 轉為?kebab-case ，并將其作為事件名；
- @Emit 會將回調函數的返回值作為第二個參數，如果返回值是一個?Promise 對象，?$emit 會在?Promise 對象被標記為?resolved 之后觸發；
- @Emit 的回調函數的參數，會放在其返回值之后，一起被?$emit 當做參數使用。
import { Vue, Component, Emit } from 'vue-property-decorator'@Component
export default class MyComponent extends Vue {count = 0@Emit()addToCount(n: number) {this.count += n}@Emit('reset')resetCount() {this.count = 0}@Emit()returnValue() {return 10}@Emit()onInputChange(e) {return e.target.value}@Emit()promise() {return new Promise(resolve => {setTimeout(() => {resolve(20)}, 0)})}
}等同于下面的?js 寫法
export default {data() {return {count: 0}},methods: {addToCount(n) {this.count += nthis.$emit('add-to-count', n)},resetCount() {this.count = 0this.$emit('reset')},returnValue() {this.$emit('return-value', 10)},onInputChange(e) {this.$emit('on-input-change', e.target.value, e)},promise() {const promise = new Promise(resolve => {setTimeout(() => {resolve(20)}, 0)})promise.then(value => {this.$emit('promise', value)})}}}7、@Ref(refKey?: string)
@Ref 裝飾器接收一個可選參數，用來指向元素或子組件的引用信息。如果沒有提供這個參數，會使用裝飾器后面的屬性名充當參數
import { Vue, Component, Ref } from 'vue-property-decorator'import { Form } from 'element-ui'@Componentexport default class MyComponent extends Vue {@Ref() readonly loginForm!: Form@Ref('changePasswordForm') readonly passwordForm!: Formpublic handleLogin() {this.loginForm.validate(valide => {if (valide) {// login...} else {// error tips}})}}等同于下面的?js 寫法
export default {computed: {loginForm: {cache: false,get() {return this.$refs.loginForm}},passwordForm: {cache: false,get() {return this.$refs.changePasswordForm}}}}@Provide/@Inject 和 @ProvideReactive/@InhectReactive
由于平時基本不用到provide/inject選項，暫時先放著，之后再補充
