vue中使用vue-class-component寫TS

vue上所有生命周期中的鈎子方法里（如created，mounted，updated）使用this,this指向調用它的vue實例 (new Vue)，this的指向會影響ts的類型推斷，為了更好地用class的模式來寫vue組件。
vue-class-component 帶來了很多遍歷 官網
1.methods，鈎子都可以直接寫作class的方法
2.computed屬性可以直接通過get來獲得
3.初始化data可以聲明為class的屬性
4.其他的都可以放到Component裝飾器里
vue-property-decorator深度依賴了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；等可以寫在class里面

創建組件的方式

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

@Component 
export default class Test extends Vue {

}

data對象（可以直接聲明為class的屬性）

export default class Test extends Vue {
  private name: string;
}

prop聲明（兩種方式）

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

@Component({
    mixins: [],
    // props傳值(方法一)
    props: {
        firstName: String,
        lastName: String
    },
    // 注冊組件
    components: {
        'component-a': ComponentA
    }
})
export default class Test extends Vue {
// props傳值(方法二)
@Prop({ default: "test" }) private label!: string;
}

method方法（直接寫作class的方法）

public func(): void {
  console.log(this.name)
}

watch 屬性監聽

// immediate 立即觸發
@Watch("$route", { immediate: true })
private onRouteChange(route: Route) {
  const query = route.query as Dictionary<string>; // ts類型斷言
  if (query) {
  this.redirect = query.redirect;
  }
}

• @Watch(path: string, options: WatchOptions = {})
  options 包含兩個屬性 immediate?:boolean 偵聽開始之后是否立即調用該回調函數 / deep?:boolean 被偵聽的對象的屬性被改變時，是否調用該回調函數

• @Watch('arr', { immediate: true, deep: true }) onArrChanged(newValue: number[], oldValue: number[]) {}

computed 計算屬性（computed屬性可以直接通過get來獲得）

public get allname() {
  return 'computed ' + this.name;
}
// allname 是計算后的值，name 是被監聽的值

生命周期函數

public created(): void {
  console.log('created');
}

public mounted():void{
  console.log('mounted')
}

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
  }
}