在Vue项⽬中应⽤TypeScript---vue-property-decorator

在 VUE 项⽬中应⽤ typescript ，我们需要引⼊⼀个库 vue-property-decorator ，

其是基于 vue-class-component 库⽽来，这个库 vue 官⽅推出的⼀个⽀持使⽤ class ⽅式来开

发 vue 单⽂件组件的库

主要的功能如下：

• methods 可以直接声明为类的成员⽅法
• 计算属性可以被声明为类的属性访问器
• 初始化的 data 可以被声明为类属性
• data、render 以及所有的 Vue ⽣命周期钩⼦可以直接作为类的成员⽅法
• 所有其他属性，需要放在装饰器中

装饰器

• 装饰器（Decorator）是一种与类（class）相关的语法，用来注释或修改类和类方法，许多面向对象的语言都有这项功能。
• 装饰器是一种函数，写成@ + 函数名。它可 以放在类和类方法的定义前面。

为什么要使用 vue-property-decorator

vue-class-component 是官方推出的vue对 typescript 支持的装饰器(库)，可以将 Vue 中的组件用类的方式编写。vue-property-decoretor 即vue属性装饰器，这个库完全依赖于 vue-class-component 。在 vue 中使用 typescript，通过装饰器来简化书写。

使用

vue-property-decorator 主要提供了多个装饰器和⼀个函数

安装

npm i -S vue-class-component
npm i -S vue-property-decorator

@Component

Component 装饰器它注明了此类为⼀个 Vue 组件，因此即使没有设置选项也不能省略

如果需要定义⽐如 name 、 components 、 filters 、 directives 以及⾃定义属性，就可以

在 Component 装饰器中定义，如下：

import { Component, Vue } from 'vue-property-decorator'
import {componentA, componentB} from ''
@Component({
  components: {
    componentA,
    componentB
  },
  directives: {
    focus: {
    // 指令的定义
      inserted: function (el) {
        el.focus()
      }
    }
  }
})

export default class YourCompoent extends Vue{
}

computed、data、methods

这⾥取消了组件的data和methods属性，以往data返回对象中的属性、methods中的⽅法需要直接定义

在Class中，当做类的属性和⽅法

• 定义变量：data 中的数据由原来的 data() 方法改成直接在对象中定义，data 内的属性直接作为实例属性书写，默认都是 public 公有属性，当变量标记为 private 时，它就不能在声明它的类的外部访问。
• 计算属性：对于 Vue 中的计算属性，我们只需要将该计算属性名定义为一个函数,在函数前加上 get 关键字即可，原本 Vue 中的 computed 里的每个计算属性都变成了在前缀添加 get 的函数。

@Component
export default class HelloDecorator extends Vue {
  const: number = 123
  add(): number {
    this.count + 1
  }

  // 设置计算属性
  get total(): number {
    return this.count + 1
  }

  // 设置计算属性
  set total(params: number): void {
    this.count = params
  }
}

@props

• 父子组件之间的属性传值，子组件接收父组件传参
  @Prop接受一个参数可以是类型变量或者对象或者数组
• @Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型

组件接收属性的装饰器，如下使⽤：

import { Component, Vue, Prop } from vue-property-decorator;
@Component
export default class YourComponent extends Vue {
  @Prop(String)
  propsA: string;

  @Prop([String, number])
  propB: string | number;


  @Prop({
    type: String,
    default: '',
    //如果是对象或数组的话。默认值从⼀个⼯⼚函数中返回
    // defatult: () => {
    // return ['a','b']
    // }
    required: true,
    validator: (value) => {
      return [
        'InProcess',
        'Settled'
      ].indexOf(value) !== -1
    }
  })
  propC: string;
}

@PropSync()

与 Prop 的区别是子组件可以对 props 进行更改, 并同步给父组件。
子组件 ComponentA：

import { Vue, Component, PropSync } from "vue-property-decorator";
@Component
export default class ComponentA extends Vue {
  @PropSync('count') private innerCount!: number // 注意@PropSync 里的参数不能与定义的实例属性同名, 因为 props 是只读的.
}

父组件：注意父组件里绑定 props 时需要加修饰符 .sync

<template>
    <ComponentA :count.sync="count"/>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ComponentA from '@/component/ComponentA.vue'
@Component({
  components:{
    ComponentA
  }
})
export default class Test extends Vue {
  private count: number = 1
}

@watch

实际就是 Vue 中的监听器

@Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象
{immediate?: boolean, deep?: boolean}第一个表示监听开始后是否立即调用回调函数，第二个表示监听的属性变化时是否调用回调函数

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

@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) { }
  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) { }
}

@emit

vue-property-decorator 提供的 @Emit 装饰器就是代替 Vue 中的事件的触发 $emit

定义emit事件，参数字符串表示分发的事件名，如果没有，则使用方法名作为分发事件名，会自动转连字符写法；

@Emit会将回调函数的返回值作为第二个参数，如果返回值为一个Promise对象，emit会在Promise-resolved后触发

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

@Component({})
export default class Some extends Vue {
  mounted() {
    this.$on('emit-todo', function (n) {
      console.log(n)
    })
    this.emitTodo('world');
  }
  @Emit()
  emitTodo(n: string) {
    console.log('hello');
  }
}