一、前言
Vue.js 是一个非常受欢迎的前端框架，它能够快速构建交互性强的单页面应用。而 vue-property-decorator 是一个用于 Vue.js 的装饰器库，可以帮助我们更方便地编写 Vue.js 组件。下面来详细讲解 vue-property-decorator 的用法。
vue-class-component 是 vue 的官方库，作用是用类的方式编写组件，这种编写方式可以让 .vue 文件的 js 结构更扁平化，并使 vue 组件可以使用继承、混入等高级特性。
目前 2.x 跟 TS 的整合，通常需要基于 vue-class-component 来用基于 class 的组件书写方式
vue英文官网推荐了一个叫vue-class-component的包，可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利：
官方文档：https://class-component.vuejs.org/
vue-property-decorator是社区出的
官网 https://www.npmjs.com/package/vue-property-decorator
vue-property-decorator使我们能在vue组件中写TypeScript语法
vue-property-decorator深度依赖了vue-class-component拓展出了更多操作符 @Prop @Model @Watch @Provide @Inject @Emit等
可以说是 vue-property-decorator是 vue-class-component的一个超集
正常开发的时候，你只需要使用vue-property-decorator中提供的操作符即可 不用再从vue-class-componen引入 vue、component
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。
二、安装
1、原项目安装
npm i -S vue-class-component npm i -S vue-property-decorator
2、使用 vue-cli 搭建新项目
vue create hello-world
选择 “Manually select features” 来手动选择特性，
勾选上 TypeScript（因为要使用装饰器语法）
勾选 “Use class-style component syntax?”
三、使用
1、 基本写法
template和css的写法不变，只是script内的写法需要注意
<script lang='ts'> import {Component, Vue} from vue-property-decorator; @Component export default class App extends Vue { }; </script>
lang=“ts”：script声明当前语言是ts
@Component：注明此类为一个vue组件
App 组件名称
export default class Test extends Vue： export当前组件类是继承vue的
2、@component
@Component({})可以声明components、filter、directives等未提供装饰器的vue选项，也可以声明computed、watch、路由守卫函数(beforeRouteEnter、beforeRouteLeave)等
即使没有组件也不能省略@Component，否则会报错。
<template> <div> <componentA></componentA> </div> </template> <script lang="ts"> import { Vue, Component } from "vue-property-decorator"; import { componentA } from "@/components"; @Component({ //组件 components: { componentA, }, }) export default class HelloWorld extends Vue { } </script>
3、Data属性
data属性初始化可以被声明为类的属性。
<template> <div>{{ message }}</div> </template> <script lang="ts"> import { Vue, Component } from "vue-property-decorator"; // 即使没有组件也不能省略@Component @Component({}) export default class HelloWorld extends Vue { // 定义的变量 message: string = "Hello World!"; } </script>
4、Methods属性
组件方法可以直接声明为类的原型方法：
<template> <button v-on:click="hello">Click</button> </template> <script lang="ts"> import { Vue, Component } from "vue-property-decorator"; @Component({}) export default class HelloWorld extends Vue { // 方法 hello() { console.log("Hello World!"); } } </script>
5、Computed 计算属性
计算属性可以声明为类属性getter/setter：
对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可
<template> <input v-model="name" /> </template> <script lang="ts"> import { Vue, Component } from "vue-property-decorator"; @Component({}) export default class HelloWorld extends Vue { // 定义的变量 firstName: string = "John"; lastName: string = "Doe"; // 计算属性 get name() { return this.firstName + " " + this.lastName; } // 计算属性 set name(value) { const splitted = value.split(" "); this.firstName = splitted[0]; this.lastName = splitted[1] || ""; } } </script>
6、@Watch
@Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象
{immediate?: boolean, deep?: boolean}第一个表示监听开始后是否立即调用回调函数，第二个表示监听的属性变化时是否调用回调函数
<template> <button v-on:click="hello">Click</button> </template> <script lang="ts"> import { Vue, Component, Watch } from "vue-property-decorator"; @Component({}) export default class HelloWorld extends Vue { // 侦听器 @Watch("message", { immediate: true, deep: true }) onChangeValue(newVal: string, oldVal: string) {} // 定义的变量 message: string = "Hello World!"; // 方法 hello() { this.message = "This is an test page!"; } } </script>
7、@Prop
子组件接收父组件传参
@Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型
// 高阶函数接受参数，兼容以下写法
@Prop(String) name!: string | undefined;
@Prop([String, Number]) count!: string | number;
@Prop({type: Number, default: 0, (required、validator)}) age!: number;
@Prop() private name!: string;
//父组件HomeView.vue <template> <div> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" /> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import HelloWorld from "@/components/HelloWorld.vue"; @Component({ //组件 components: { HelloWorld, }, }) export default class HomeView extends Vue {} </script>
//子组件HelloWorld.vue <template> <div> {{ msg }} </div> </template> <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; @Component({}) export default class HelloWorld extends Vue { // 父组件传递的参数 //这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值 @Prop({ type: String, default: "" }) msg!: string; } </script>
8、@Emit
@Emit会将回调函数的返回值作为第二个参数，如果返回值为一个Promise对象，emit会在Promise-resolved后触发
@Emit(‘del’) private delEmit(e: MouseEvent){}
@Emit()//省略参数将使用回调函数名，转化为中划线@add-data
addData(data: any){return ‘’;}//如果此处不return，则使用函数参数data
//父组件HomeView.vue <template> <div> <HelloWorld @editHandleEmit="editHandle" /> </div> </template> <script lang="ts"> import { Component, Vue } from "vue-property-decorator"; import HelloWorld from "@/components/HelloWorld.vue"; @Component({ //组件 components: { HelloWorld, }, }) export default class HomeView extends Vue { // 方法 editHandle(row: any) { console.log(row); } } </script>
//子组件HelloWorld.vue <template> <div> <button v-on:click="editHandle">Click</button> </div> </template> <script lang="ts"> import { Component, Vue, Emit } from "vue-property-decorator"; @Component({}) export default class HelloWorld extends Vue { // 定义的变量 count: number = 0; // Emit方法 @Emit("editHandleEmit") private editHandle() { return this.count; } } </script>
9、Mixins
Vue类组件提供了mixins辅助功能，以类样式方式使用mixins。通过使用mixins帮助程序，TypeScript可以推断混合类型并在组件类型上继承它们。
注意：所有mixin必须声明为类组件。
// mixins.ts import { Vue, Component } from 'vue-property-decorator'; //定义vue/type/vue模块 declare module 'vue/types/vue' { interface Vue { value: string; } } @Component export default class myMixins extends Vue { // 定义的变量 value: string = 'Hello' }
//页面HelloWorld.vue import { Vue, Component, Prop } from 'vue-property-decorator'; import myMixins from './mixins'; @Component({ //混入 mixins: [myMixins] }) export default class myComponent extends Vue { // 生命周期 created() { console.log(this.value) // => Hello } }
四、总结
- methods，钩子都可以直接写作class的方法
- computed属性可以直接通过get来获得
- 初始化data可以声明为class的属性
- 其他的都可以放到Component装饰器里
![[译] 用 Typescript + Composition API 重构 Vue 3 组件](https://ucc.alicdn.com/hid5ykfodc62m_20240829_e496cb22e4e94454b6319d817d78e968.webp?x-oss-process=image/resize,h_160,m_lfit)
