vue-property-decorator的基础使用实践

vue-property-decorator帮助我们让vue支持TypeScript的写法，这个库是基于 vue-class-component库封装实现的。
注：以下环境为 vue2.x + typescript

基本使用

基础模板

和原来的vue单文件组件写法对比，template和css区域写法不变，只是script部分的写法有变化。

• lang="ts"表示当前支持语言为Typescript
• @Component表示当前类为vue组件
• export default class HelloWorld extends Vue表示导出当前继承vue的类

data数据定义

export default class HelloWorld extends Vue {
    msg: string = "";
}

data中数据属性在类中声明为类属性即可

生命周期钩子

export default class HelloWorld extends Vue {
    created(): void {
    }
}

所有生命周期钩子也可以直接声明为类原型方法，但不能在实例本身上调用他们

method方法

export default class HelloWorld extends Vue {
    initData(): void {
    }
}

method里面的方法在类中直接声明为类原型方法即可

计算属性

计算属性声明为类属性 getter/setter

其他选项

对于其他选项，将他们传递给装饰器函数

装饰器函数

@Component

@Component可以接收一个对象，注册子组件

import { Component, Vue, Ref } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';
@Component({
  components: {
    HelloWorld,
  },
})
export default class HomeView extends Vue {
}

如果我们使用Vue Router时，希望类组件解析他们提供的钩子，这种情况下，可以使用 Component.registerHooks注册这些钩子

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <input type="text" v-model="name">
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// 注册路由钩子
Component.registerHooks([
  "beforeRouteEnter",
  "beforeRouteLeave"
])

@Component
export default class AboutView extends Vue {
  // 注册钩子之后，类组件将他们实现为类原型方法
  beforeRouteEnter(to: any, from: any, next: any) {
    console.log("beforeRouteEnter");
    next();
  }
  beforeRouteLeave(to: any, from: any, next: any) {
    console.log("beforeRouteLeave");
    next();
  }
}
</script>

建议将注册代码写在单独的文件中，因为我们必须在任何组件定义之前注册他们。import将钩子注册的语句放在主文件的顶部来确保执行顺序

// class-component-hooks.ts
import { Component } from 'vue-property-decorator'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave'
])

// main.ts
import './class-component-hooks'
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

@Prop

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

• Constructor，指定 prop 的类型，例如 String，Number，Boolean等
• Constructor[]，指定 prop的可选类型
• PropOptions，指定 type，default，required，validator等选项

属性的 ts 类型后面需要设置初始类型 undefined，或者在属性名后面加上!，表示非null和非undefined的断言，否则编译器给出错误提示

父组件

// Test.vue

子组件

// TestChildren.vue

@PropSync

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

• @PropSync装饰器接收两个参数：
  • propName：string，表示父组件传递过来的属性名
  • options：Constructor | Constructor[] | PropOptions与@Prop的第一个参数一样
• @PropSync会生成一个新的计算属性，所以@PropSync里面的参数名不能与定义的实例属性同名，因为prop是只读的

@PropSync与@Prop的区别是使用@PropSync，子组件可以对 peops 进行更改，并同步到父组件。

使用 @PropSync需要在父组件绑定props时使用 .sync修饰符

父组件

子组件

@Emit

@Emit(event?: string)

• @Emit装饰器接收一个可选参数，该参数是$emit的第一个参数，作为事件名。如果第一个参数为空，@Emit修饰的事件名作为第一个参数，$emit会将回调函数的camelCase转化为kebab-case
• @Emit会将回调函数的返回值作为 $emit的第二个参数。如果返回值是一个Promise对象，$emit会在Promise对象状态变为resolved之后被触发
• @Emit回调函数的参数，会放在返回值之后，作为$emit参数

父组件

子组件

// 上例@Emit相当于
changeName() {
    this.$emit("changeName", this.value);
}

@Emit()
changeName(arg: string): string {
    return this.value;
}
// 相当于
changeName(arg) {
    this.$emit("changeName", this.value, arg);
}

@Emit("change-name")
change(arg: string): string {
    return this.value;
}
// 相当于
change(arg) {
    this.$emit("changeName", this.value, arg);
}

@Emit()
changeName(): Promise<number> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(20)
        }, 2000)
    })
}
// 相当于
changeName() {
    const promise = new Promise((resolve) => {
        setTimeout(() => {
            resolve(20)
        }, 2000)
    })
    promise.then(val => {
    	this.$emit("changeName", this.val)
    })
}

@Ref

@Ref(refKey?: string)

@Ref接收一个可选的参数，表示元素或子组件的ref引用，如果不传参数，则使用装饰器后面的属性名作为参数

@Watch

@Watch(path: string, options: WatchOptions = {})

@Watch接收两个参数：

• path: string表示被侦听的属性名称
• options包含immediate?: boolean和 deep: boolean属性

@Watch("value")
    valueWatch(newV: string, oldV: string) {
    console.log(newV, oldV);
}
@Watch("name", { immediate: true, deep: true })
    nameWatch(newV: string, oldV: string) {
    console.log(newV, oldV);
}

@Model

@Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {})

@Model允许我们在组件上自定义v-model指令，接收两个参数：

• event事件名
• options和 Prop接收的参数类型一样

父组件

子组件

解释

export default class TestChildren extends Vue {
  @Model("update", { type: String })
  readonly value!: string;
}
// 相当于
export default {
    model: {
        prop: 'value',
        event: 'update'
    },
    props: {
        value: {
            type: String
        }
    }
}

其他

以下装饰器后面使用到会及时补充，如果有不清楚的可以查看文档

• @ModelSync

• @Provide

• @Inject

• @ProvideReactive

• @InjectReactive

• @VModel

• Mixins