Vue|vue-property-decorator用法详解 vue.js|typescript|TypeScript

- 安装
- 引入
- @Component
- - registerHooks
- data
- computed
- @Prop
- @PropSync
- @Watch
- @Ref
- @Emit
- @Model
- @Provide/@Inject/@ProvideReactive/@InjectReactive
- Mixins (在vue-class-component中定义)

怎么使vue支持ts写法呢,我们需要用到 vue-property-decorator，这个库完全依赖于 vue-class-component.
安装

npm i -D vue-proporty-decorator

引入当我们在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样:

="ts">

@Component 注：该属性完全继承于vue-class-component
属性参数：@Component(options: ComponentOptions = {})
参数说明：@Component 装饰器可以接收一个对象作为参数，可以在对象中声明 components ，filters，directives, beforeRouteLeave等未提供装饰器的选项，也可以声明computed，watch等
registerHooks
除了将beforeRouteLeave放在Component中之外,还可以全局注册,就是registerHooks

="ts"> import { Component, Vue } from 'vue-property-decorator' Component.registerHooks([ 'beforeRouteLeave', 'beforeRouteEnter', ]); @Component export default class App extends Vue { beforeRouteEnter(to: any, from: any, next: any) { console.log('beforeRouteEnter') next() }beforeRouteLeave(to: any, from: any, next: any) { console.log('beforeRouteLeave') next() } }

data 对于data里的变量类型,我们可以直接按ts定义类变量的写法写就可以

="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component export default class "组件名" extends Vue{ ValA: string = 'hello world'; ValB: number = 1; }

等同于

> export default { data(){ return { ValA: 'hello world', ValB: 1 } } }

computed 对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可.原本Vue中的computed里的每个计算属性都变成了在前缀添加get的函数.

="ts"> import {Vue, Component} from 'vue-property-decorator'; @Component export default class "组件名" extends Vue{ get ValA(){ return 1; } }

等同于

> export default { computed: { ValA: function() { return 1; } } }

@Prop 属性参数：@Prop(options: (PropOptions | Constructor[] | Constructor) = {})
参数说明：@Prop装饰器接收一个参数，这个参数可以有三种写法：
PropOptions，可以使用以下选项：type，default，required，validator;
Constructor[]，指定 prop 的可选类型；
Constructor，例如String，Number，Boolean等，指定 prop 的类型；
注意：属性的ts类型后面需要加上undefined类型；或者在属性名后面加上!，表示非null 和 非undefined的断言，告诉TypeScript我这里一定有值，否则编译器会给出错误提示；
比如子组件从父组件接收三个属性propA,propB,propC
propA类型为Number
propB默认值为default value
propC类型为String或者Boolean

export default { props: { propA: { type: Number }, propB: { default: 'default value' }, propC: { type: [String, Boolean] }, } }

我们使用vue-property-decorator提供的@Prop可以将上面的代码改造为如下:

="ts"> import {Vue, Component, Prop} from 'vue-property-decorator'; @Component export default class "组件名" extends Vue{ @Prop(Number) propA!: number; @Prop({default: 'default value'}) propB!: string; @prop([String, Boolean]) propC: string | boolean; }

总结: @Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型.
@PropSync 属性参数：@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})
@PropSync装饰器与@prop用法类似，二者的区别在于：

@PropSync 装饰器接收两个参数：
propName: string 表示父组件传递过来的属性名；
options: Constructor | Constructor[] | PropOptions 与@Prop的第一个参数一致；
@PropSync 会生成一个新的计算属性。

注意：使用PropSync的时候是要在父组件配合.sync使用的
示例：

// 父组件 ='ts'> import { Vue, Component } from 'vue-property-decorator'; import PropSyncComponent from '@/components/PropSyncComponent.vue'; @Component({components: { PropSyncComponent },}) export default class PropSyncPage extends Vue { private like = '父组件的like'; } // 子组件 ="ts"> import { Component, Prop, Vue, PropSync,} from 'vue-property-decorator'; @Component export default class PropSyncComponent extends Vue { @PropSync('like', { type: String }) syncedlike!: string; // 用来实现组件的双向绑定,子组件可以更改父组件穿过来的值 editLike(): void { this.syncedlike = '子组件修改过后的syncedlike!'; // 双向绑定,更改syncedlike会更改父组件的like } }

@Watch 属性参数：@Watch(path: string, options: WatchOptions = {})
参数说明：@Watch 装饰器接收两个参数：

path: string 被侦听的属性名；
options?: WatchOptions={} options可以包含两个属性：
immediate?:boolean 侦听开始之后是否立即调用该回调函数；
deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数；

我们可以利用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化.
在Vue中监听器的使用如下:

export default{ watch: { 'child': this.onChangeValue, // 这种写法默认 `immediate`和`deep`为`false` 'person': { handler: 'onChangeValue', immediate: true, deep: true } }, methods: { onChangeValue(newVal, oldVal){ // todo... } } }

那么我们如何使用@Watch装饰器来改造它呢?

import {Vue, Component, Watch} from 'vue-property-decorator'; @Watch('child') onChangeValue(newVal: string, oldVal: string){ // todo... }@Watch('person', {immediate: true, deep: true}) onChangeValue(newVal: Person, oldVal: Person){ // todo... }

总结: @Watch使用非常简单,接受第一个参数为要监听的属性名第二个属性为可选对象.@Watch所装饰的函数即监听到属性变化之后的操作.
@Ref 属性参数：@Ref(refKey?: string)
参数说明：@Ref 装饰器接收一个可选参数，用来指向元素或子组件的引用信息。如果没有提供这个参数，会使用装饰器后面的属性名充当参数

="ts"> import { Vue, Component, Ref } from 'vue-property-decorator'; import RefComponent from '@/components/RefComponent.vue'; @Component({ components: { RefComponent }, }) export default class RefPage extends Vue { @Ref('RefComponent') readonly RefC!: HTMLDocument; @Ref('aButton') readonly ref!: HTMLButtonElement; getRef() { console.log(this.RefC); console.log(this.ref); } }

@Emit 属性参数：@Emit(event?: string)
参数说明：

@Emit 装饰器接收一个可选参数，充当事件名。如果没有提供这个参数，@Emit会将回调函数名的camelCase转为kebab-case，并将其作为事件名；
@Emit的回调函数的参数，会在回调函数没有返回值的情况下，被$emit当做第二个参数使用。
@Emit会将回调函数的返回值作为第二个参数，如果返回值是一个Promise对象，$emit会在Promise对象被标记为resolved之后触发；

="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component export default class "组件名" extends Vue{ mounted(){ this.$on('emit-todo', function(n) { console.log(n) })this.emitTodo('world'); }@Emit() emitTodo(n: string){ console.log('hello'); } }

运行上面的代码会打印 ‘hello’ ‘world’, 为什么呢? 让我们来看看它等同于什么

> import Vue from 'vue'; export default { mounted(){ this.$on('emit-todo', function(n) { console.log(n) })this.emitTodo('world'); }, methods: { emitTodo(n){ console.log('hello'); this.$emit('emit-todo', n); } } }

可以看到,在@Emit装饰器的函数会在运行之后触发等同于其函数名(驼峰式会转为横杠式写法)的事件, 并将其参数传递给$emit.
如果我们想触发特定的事件呢,比如在emitTodo下触发reset事件:

="ts"> import {Vue, Component, Emit} from 'vue-property-decorator'; @Component export default class "组件名" extends Vue{@Emit('reset') emitTodo(n: string){} }

我们只需要给装饰器@Emit传递一个事件名参数reset,这样函数emitTodo运行之后就会触发reset事件.
@Model 默认情况下，一个组件上的v-model 会把 value用作 prop且把 input用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。
下面是Vue官网的例子

Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` ` })

注意：你仍然需要在组件的 props 选项里声明 checked 这个 prop。
使用vue-property-decorator提供的@Model改造上面的例子。

import { Vue, Component, Model} from 'vue-property-decorator'; @Component export class myCheck extends Vue{ @Model ('change', {type: Boolean})checked!: boolean; }

@Provide/@Inject/@ProvideReactive/@InjectReactive 属性参数：

@Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) decorator
@ProvideReactive(key?: string | symbol) / @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey) decorator

参数说明：

提供/注入装饰器,
key可以为string或者symbol类型,
相同点:Provide/ProvideReactive提供的数据,在内部组件使用Inject/InjectReactive都可取到

不同点:

如果提供(ProvideReactive)的值被父组件修改，则子组件可以使用InjectReactive捕获此修改。

// 最外层组件 ="ts"> import { Vue, Component, Provide, ProvideReactive, } from 'vue-property-decorator'; import provideGrandpa from '@/components/ProvideGParentComponent.vue'; @Component({ components: { provideGrandpa }, }) export default class ProvideInjectPage extends Vue { @Provide('foo') foo = 'foo' @ProvideReactive('reactiveKey1') reactiveKey1 = 'reactiveKey1' @ProvideReactive('reactiveKey2') reactiveKey2 = 'reactiveKey2' created() { // 此处验证@Provide @ProvideReactive 键值被修改 this.foo = 'foo111' this.reactiveKey1 = 'reactiveKey111' this.reactiveKey2 = 'reactiveKey222' } } } // ...provideGrandpa调用父母组件 // ...ProvideParentComponent调用儿子组件 // ...ProvideSonComponent调用孙子组件 // 孙子组件,经过多层引用后,在孙子组件使用Inject可以得到最外层组件provide的数据哦 ="ts"> import { Component, Vue, Inject, InjectReactive, } from 'vue-property-decorator'; @Component export default class ProvideGSonComponent extends Vue { @Inject('foo') foo!: string @InjectReactive('reactiveKey1') reactiveKey1!: string @InjectReactive('reactiveKey2') reactiveKey2!: string }

Mixins (在vue-class-component中定义) 在使用Vue进行开发时我们经常要用到混合,结合TypeScript之后我们有两种mixins的方法。
一种是vue-class-component提供的.

//定义要混合的类 mixins.ts import Vue from 'vue' import Component from 'vue-class-component'@Component // 一定要用Component修饰 export default class MyMixins extends Vue { value = 'https://www.it610.com/article/Hello' }

// 引入 import Component, { mixins } from 'vue-class-component' import myMixins from './Mixins'@Component export default class Project extends mixins(myMixins) { created() { console.log(this.value) } }

【Vue|vue-property-decorator用法详解】等同于

// Mixins.ts //定义要混合的类 mixins.ts import Vue from 'vue' import { Component } from 'vue-property-decorator'@Component // 一定要用Component修饰 export default class MyMixins extends Vue { value = 'https://www.it610.com/article/Hello' }// 引入import { Component } from 'vue-property-decorator' import myMixins from './Mixins'@Component export default class Project extends myMixins { created() { console.log(this.value) } }

第二种方式是在@Component中混入.
我们改造一下mixins.ts,定义vue/type/vue模块,实现Vue接口

// mixins.ts import { Vue, Component } from 'vue-property-decorator'; declare module 'vue/types/vue' { interface Vue { value: string; } }@Component export default class myMixins extends Vue { value = 'https://www.it610.com/article/Hello' }

混入

import { Vue, Component} from 'vue-property-decorator'; import myMixins from './Mixins'; @Component({ mixins: [myMixins], created(){ console.log(this.value) // => Hello } }) export default class myComponent extends Vue{}

总结: 两种方式不同的是在定义mixins时如果没有定义vue/type/vue模块, 那么在混入的时候就要继承该mixins; 如果定义vue/types/vue模块,在混入时可以在@Component中mixins直接混入。