详解vue-property-decorator使用手册

简介

vue-property-decorator是Vue.js的一个装饰器库，可以简化在Vue组件中使用的代码。它提供了许多便捷的装饰器，可以为组件的class、props、data、computed、methods以及生命周期钩子等添加修饰符。

使用

安装

你可以使用npm或yarn命令进行安装，也可以手动下载文件后使用。

npm i vue-property-decorator

引入

在你的Vue组件文件中引入vue-property-decorator，例如：

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

相关装饰器

@Component

@Componet是vue-class-component的一个装饰器，为Vue组件类提供了一些附加功能。

@Component({})
export default class App extends Vue {}

其中，@Component接收一个配置对象作为参数，可以为组件提供名称、属性、计算属性、指令、过滤器、方法、生命周期钩子等。

@Prop

@Prop装饰器用于定义组件的属性。

@Component({})
export default class App extends Vue {
  @Prop(Number) readonly propA!: number
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Number]) readonly propC: string | number
}

其中，@Prop接收一个参数作为属性类型，属性类型可以为String、Number、Boolean、Array、Object等类型，也可以为一个类（当属性类型为自定义类时，需要额外定义deserialize方法），可以通过标记！来表示该属性是必须的，可以通过添加default属性来设置默认值。

@Model

@Model装饰器用于定义组件的v-model。

@Component({})
export default class App extends Vue {
  @Model('change', { type: Boolean }) readonly checked!: boolean
}

其中，@Model接收一个参数作为v-model的事件名，也可以通过添加type等属性来设置默认值、属性类型等。

@Watch

@Watch装饰器用于定义组件的属性监听器。

@Component({})
export default class App extends Vue {
  @Prop(Number) readonly propA!: number
  @Prop(Number) readonly propB!: number

  @Watch('propA')
  onPropAChanged(val: number, oldVal: number) {
    console.log(`Prop a changed from ${oldVal} to ${val}`)
  }

  @Watch('propB', { immediate: true })
  onPropBChanged(val: number, oldVal: number) {
    console.log(`Prop b changed from ${oldVal} to ${val}`)
  }
}

其中，@Watch接受一个参数作为监听的属性，也可以通过添加immediate等属性来设置是否在属性初始化时立即调用监听函数。

示例

以下是一个使用vue-property-decorator的示例，将用户输入的姓名和年龄显示在页面上。

<template>
  <div>
    <div>
      <label>Name: </label>
      <input type="text" v-model="name" />
    </div>
    <div>
      <label>Age: </label>
      <input type="number" v-model.number="age" min="0"/>
    </div>
    <p>My name is {{ name }} and I am {{ age }} years old.</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  private name: string = ''
  private age: number = 0
}
</script>

在这个示例中，我们使用了@Component装饰器来为组件提供一些配置，使用了v-model指令来绑定输入框的值，并将它们作为组件的data绑定到页面上。

以下是另一个使用vue-property-decorator的示例，实现两个组件之间的数据传递。

<!-- Child.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <p>My name is {{ name }} and I am {{ age }} years old.</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Child extends Vue {
  @Prop(String) private name!: string
  @Prop(Number) private age!: number
}
</script>

<!-- Parent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <div>
      <label>Name: </label>
      <input type="text" v-model="name" />
    </div>
    <div>
      <label>Age: </label>
      <input type="number" v-model.number="age" min="0"/>
    </div>
    <Child :name="name" :age="age" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Child from './Child.vue'

@Component({
  components: { Child }
})
export default class Parent extends Vue {
  private name: string = ''
  private age: number = 0
}
</script>

在这个示例中，我们使用了@Prop装饰器来定义了Child组件的属性，使用了:name和:age来将属性值传递给Child组件。

结论

在使用vue-property-decorator之后，我们可以使用一些便捷的装饰器来简化我们的代码，提高开发效率。同时，这些装饰器的语法也与ES6和TypeScript紧密结合，可以更好地兼容这些现代化的技术。