自定义装饰器

可以借助 Vue Class Component 提供的 createDecorator 方法来创建装饰器。createDecorator 方法接受三个参数，第一个是组件选项对象，第二个是被装饰的属性或者是方法，第三个是如果装饰器使用的时候有传参则为参数的索引。

// decorators.js
import { createDecorator } from 'vue-class-component'

export const Log = createDecorator((options, key) => {
  // 保留原来的方法以备后面使用
  const originalMethod = options.methods[key]
  // 使用打印的逻辑包装 method
  options.methods[key] = function wrapperMethod(...args) {
    // 打印 log
    console.log(`Invoked: ${key}(`, ...args, ')')
    // 调用原来的方法
    originalMethod.apply(this, args)
  }
})

// index.vue
import Vue from 'vue'
import Component from 'vue-class-component'
import { Log } from './decorators'

@Component
class MyComp extends Vue {
  // 调用 hello 方法的时候就会打印 log。
  @Log
  hello(value) {
    // ...
  }
}

如上面的代码所示，可以在 Vue 组件中使用自定义的 Log 装饰器，它其实是借助 Vue Class Component 的 createDecorator 方法创建的函数。这个 createDecorator 方法内部就是先保留原来的组件方法，再重写一个新方法，当执行这个新方法的时候就会打印信息并执行原来的方法。

extend 和 mixins

可以使用 extend 继承一个已存在的 class 组件，但是这个组件的祖先必须是 Vue，并且这个组件需要运用了 @Component 装饰器。如果想继承多个 class 组件，可以借助 Vue Class Component 提供的 mixins 方法。

// mixins.js
import Vue from 'vue'
import Component from 'vue-class-component'

// 创建两个组件
@Component
export class Hello extends Vue {
  hello = 'Hello'
}

@Component
export class World extends Vue {
  world = 'World'
}

import Component, { mixins } from 'vue-class-component'
import { Hello, World } from './mixins'

// 使用 mixins 方法来继承两个 class 组件。
@Component
export class HelloWorld extends mixins(Hello, World) {
  created () {
    console.log(this.hello + ' ' + this.world + '!') // -> Hello World!
  }
}

如代码所示， HelloWorld 组件使用了 mixins 方法，来同时继承 Hello 和 World 两个组件，这样在 HelloWorld 组件中就可以同时使用 Hello 组件和 World 组件里面的实例属性。

小结

本文主要介绍了 Vue Class Component 包里面自定义装饰器功能和组件继承功能。自定义装饰器可以调用 createDecorator 方法来实现，而组件继承可以使用原生的 extends 命令，如果是同时继承多个组件，可以调用提供的 mixins 方法。

参考资料： class-component.vuejs.org/guide/exten…