vue-property-decorator 装饰器详解

最新推荐文章于 2024-08-09 07:31:19 发布

Arencn.

最新推荐文章于 2024-08-09 07:31:19 发布

阅读量3k

点赞数

分类专栏： Vue 文章标签： vue.js typescript

原文链接：https://github.com/kaorun343/vue-property-decorator

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

简述
安装方法
使用方法

简述

近期对于vue-property-decorator使用还是比较频繁，所以梳理一下其实内容不多

本文的方式是翻译一下官方文档再配以自己的理解笔者自己的话会以引入的形式体现以区分原文

这就是我说的话

现在让我们开始

这个库完全依赖于vue-class-component，所以请在使用这个库之前阅读其自述文件。

就是说@Component这个装饰器的文档看vue-class-component的，因为它就是引入了他的再抛出来

安装方法

npm i -S vue-property-decorator

使用方法

有几个装饰器和1个函数(Mixin)：

@Prop
@PropSync
@Model
@ModelSync
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
@VModel
@Component (provided by vue-class-component)
Mixins (the helper function named mixins provided by vue-class-component)

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

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

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

等于

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

这一段还是很简单明了的，就是把prop换成了@Prop然后把属性啥的都传入
不过有一点，我在实际应用中并没有用到传入类型的场景，可能因为ts的类型检查，所以传入不传入都差别不大个人感觉。还有就是记得加类型断言如果不为空的话

如果要从其类型定义中设置每个道具值的类型属性，则可以使用 reflect-metadata。
设置 emitDecoratorMetadata 为 true
只需要在导入 vue-property-decorator之前导入一次reflect-metadata即可

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

@Component
export default class MyComponent extends Vue {
  @Prop() age!: number
}

个人觉得意义不大，按需取用吧

每个属性的默认值都需要定义的和上面所示的示例代码一样。
不支持定义每个默认属性，如@Prop() prop = 'default value'。

意思就是默认值得写在@Prop({default :''xxx}) private xxx!:number这样
在实际应用中笔者用的最多的就是@Prop({default}) @Prop({require})并且这两个属性是互斥的，没有同时存在的意义

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

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

@Component
export default class YourComponent extends Vue {
  @PropSync('name', { type: String }) syncedName!: string
}

等于

export default {
  props: {
    name: {
      type: String,
    },
  },
  computed: {
    syncedName: {
      get() {
        return this.name
      },
      set(value) {
        this.$emit('update:name', value)
      },
    },
  },
}

@PropSync的工作原理就像@Prop一样，除了它将propName作为装饰器的参数，而且还在背后创建了一个计算属性的get和set。通过这种方式，您可以使用这个传入的prop，就像它是一个常规数据属性一样，同时使它可在父组件中附加.sync修饰符。

一个很好用的属性，在做弹窗啥的时候，就很方便，只要在父级传入的该属性的时候加上.sync就可以实现父子级的双向绑定，代码简洁不少还是像@Prop一样我基本不传类型

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

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

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

等于

export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
}

@Model属性还可以通过reflect-metadata从其类型定义中设置type。

真没用过，个人觉得很鸡肋，随便写点啥也不能用啊，了解一下吧，如果不了解双向绑定原理啥的请自行查阅文档

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

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

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

等于

export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
  computed: {
    checkedValue: {
      get() {
        return this.checked
      },
      set(value) {
        this.$emit('change', value)
      },
    },
  },
}

@ModelSync 属性还可以通过reflect-metadata从其类型定义中设置type。

这个属性也是挺好用的可以实现父组件在外面v-model 而不是.sync的需求，还有就是这两个值其实都可以随便传，因为父级使用v-model实现的话根本不认属性是什么，当然如果父级不使用v-model而是手动绑定啥的就有用了

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

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

@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}

  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

等于

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false,
      },
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {},
  },
}

没啥好说的，用法简单，实现监听属性，方法的名字可以随便取不要被他忽悠了

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

import { Component, Inject, Provide, Vue } from 'vue-property-decorator'

const symbol = Symbol('baz')

@Component
export class MyComponent extends Vue {
  @Inject() readonly foo!: string
  @Inject('bar') readonly bar!: string
  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string
  @Inject(symbol) readonly baz!: string

  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'
}

等于

const symbol = Symbol('baz')

export const MyComponent = Vue.extend({
  inject: {
    foo: 'foo',
    bar: 'bar',
    optional: { from: 'optional', default: 'default' },
    baz: symbol,
  },
  data() {
    return {
      foo: 'foo',
      baz: 'bar',
    }
  },
  provide() {
    return {
      foo: this.foo,
      bar: this.baz,
    }
  },
})

这个代码已经一目了然了，provide inject用的比较少，如果不知道这两个属性是干嘛的，建议看看vue官方文档，我只有在做插件的时候用过一次两次

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

这些装饰器是@Provide和@Inject的响应式版本。如果父组件修改了提供的值，则子组件可以捕获此修改。

const key = Symbol()
@Component
class ParentComponent extends Vue {
  @ProvideReactive() one = 'value'
  @ProvideReactive(key) two = 'value'
}

@Component
class ChildComponent extends Vue {
  @InjectReactive() one!: string
  @InjectReactive(key) two!: string
}

@Emit(event?: string) decorator

由@Emit $emit的函数发出返回值，后面是原始参数。如果返回值是一个Promise，则在resolved之前运行它。

如果事件没有通过事件参数提供事件的名称，则改为使用函数名称。在这种情况下，函数的名称会被转换成xxx-xxx式的

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

@Component
export default class YourComponent extends Vue {
  count = 0

  @Emit()
  addToCount(n: number) {
    this.count += n
  }

  @Emit('reset')
  resetCount() {
    this.count = 0
  }

  @Emit()
  returnValue() {
    return 10
  }

  @Emit()
  onInputChange(e) {
    return e.target.value
  }

  @Emit()
  promise() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

等于

export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
    },
    promise() {
      const promise = new Promise((resolve) => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })

      promise.then((value) => {
        this.$emit('promise', value)
      })
    },
  },
}

一开始一直觉得鸡肋，但是使用过之后才明白了这个设计的意义，其实是为了在使用$emit的时候能够得到类型保护，比如你执行了很大一段，然后执行一个带有$Emit()的函数它其实就是替代了$emit，并且使你获得了类型保护，所以用处还是很大的，不过关于eventBus的 $emit可以设计一个接口来实现类型保护

@Ref(refKey?: string) decorator

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

import AnotherComponent from '@/path/to/another-component.vue'

@Component
export default class YourComponent extends Vue {
  @Ref() readonly anotherComponent!: AnotherComponent
  @Ref('aButton') readonly button!: HTMLButtonElement
}

等于

export default {
  computed() {
    anotherComponent: {
      cache: false,
      get() {
        return this.$refs.anotherComponent as AnotherComponent
      }
    },
    button: {
      cache: false,
      get() {
        return this.$refs.aButton as HTMLButtonElement
      }
    }
  }
}

最后一个用处很大的装饰器，可以解决使用 refs使得不到类型提示的痛苦

@VModel(propsArgs?: PropOptions) decorator

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

@Component
export default class YourComponent extends Vue {
  @VModel({ type: String }) name!: string
}

等于

export default {
  props: {
    value: {
      type: String,
    },
  },
  computed: {
    name: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      },
    },
  },
}