vue中使用vue-property-decorator
一、前言
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内的写法需要注意
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，否则会报错。
3、Data属性
data属性初始化可以被声明为类的属性。
{{ message }}
4、Methods属性
组件方法可以直接声明为类的原型方法：
5、Computed 计算属性
计算属性可以声明为类属性getter/setter：
对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可
6、@Watch
@Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象
{immediate?: boolean, deep?: boolean}第一个表示监听开始后是否立即调用回调函数，第二个表示监听的属性变化时是否调用回调函数
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
//子组件HelloWorld.vue
{{ msg }}
8、@Emit
@Emit会将回调函数的返回值作为第二个参数，如果返回值为一个Promise对象，emit会在Promise-resolved后触发
@Emit(‘del’) private delEmit(e: MouseEvent){}
@Emit()//省略参数将使用回调函数名，转化为中划线@add-data
addData(data: any){return ‘’;}//如果此处不return，则使用函数参数data
//父组件HomeView.vue
//子组件HelloWorld.vue
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装饰器里