Vue 装饰器写法

依赖库介绍

vue-class-component(官方文档)

是Vue的官方库，支持以class的方式来写vue代码,它支持下列写法

• methods可以直接声明类的成员方法
• 计算属性可以被声明为类的属性访问器
• 初始化的data可以被声明为类属性
• data、render已经所有的Vue生命周期钩子可以作为类的成员方法
• 提供的装饰器Component和处理mixins写法的方式mixins
• 所有其他属性需要放在装饰器Component

vue-property-derocator(官方文档)

是Vue社区维护的在vue-class-component的基础上开发的库，它是对上一个库的拓展，添加了一下装饰器用来处理一些原本需要放在Component中的属性，下列是它提供的一下装饰器

• @Prop
• @PropSync
• @Provide
• @Model
• @Watch
• @Inject
• @Emit
• @Component(来自vue-class-component库的vue-class-component)
• Mixins方法(来自vue-class-component库mixins)

vuex-class(官方文档)

是Vue主要贡献者在vue-class-component基础上封装的针对vuex的装饰器写法的库。它提供了4个装饰器和namespace

• @State
• @Getter
• @Mutation
• @Action
• namespace

装饰器使用

Js写法也可使用装饰器写法，用法相同，只是Ts语法部分会有不同；eslint规范也有可能报错，需要修改部分配置

安装

npm i --save vue-class-component
npm i --save vuex-class
npm i --save-dev vue-property-decorator
复制代码

导入与使用

// 导入部分
import Component, { mixins } from 'vue-class-component'
// 如果用到了vue-property-decorator库，建议只使用一个库导入，避免Component在项目中频繁从两个不同的库中读取
import { Component, Prop, Vue } from 'vue-property-decorator'

// 使用部分，@Component必写
@Component
export default class HelloWorld extends Vue {
}
复制代码

vue-class-component部分

data、methods、计算属性、生命周期钩子部分

• 原写法

export default {
  data () {
    return {
      msg: 'msg'
    }
  },
  methods: {
    add () {}
  },
  mounted() {}, 
  computed: {
    newmsg () {
      return 'new ' + this.msg
    }
  }
}
复制代码

• 装饰器写法 data与methods直接定义为类的属性即可，computed需要定义为访问器属性，mixins方法原本通过mixins属性导入改为通过继承

@Component
export default class HelloWorld extends Vue {
  msg!: Number // data
  // 由于Ts最新版本使用了strictPropertyInitialization，如果变量没有在构造函数中使用或赋值，都需要添加!，进行显式赋值断言
  add () {} // methods
  get newmsg() { // computed
    return this.msg
  }
  mounted() {} // 生命周期钩子
}
复制代码

mixins混入方法实现

• 原写法

import mix from './mixin'
export default {
  mixins: [mix] // 通过mixins属性导入
}
复制代码

• 装饰器写法 通过继承装饰器提供的mixins方法处理后的混入方法mix实现

import Component, { mixins } from 'vue-class-component'
import mix from './mixin'

@Component
export class MyComp extends mixins(mix) {
  created () {
    console.log(this.mixinValue) // -> Hello
  }
}
复制代码

其他的部分(components、fliter、directives、Prop、Watch等)

• 原写法

export default {
  components: {},
  props: {},
  watch: {
    msg (newVal, oldVal) {}
  }
}
复制代码

• 装饰器写法 其余的部分全部包裹在@Component装饰器中

@Component({
  components: {},
  props: {},
  watch: {
    new (newVal, oldVal) {}
  }
})
export default class HelloWorld extends Vue {}
复制代码

vue-property-decorator扩展的装饰器

@Component(options:ComponentOptions = {})

@Component装饰器来自vue-class-component，功能没有变化，在使用了vue-property-derocator后，主要用包括其尚不支持的component、directives等属性