Vue装饰器写法-vue-class-component

Vue装饰器写法

依赖库介绍

vue-property-derocator (官方文档)

在Vue中使用TypeScript时，非常好用的一个库，使用装饰器来简化书写，下列是它提供的一下装饰器。

1.安装 npm i -S vue-property-decorator

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

vuex-class(官方文档)

vuex-class可以包装vuex的写法，使代码简化，它提供了4个装饰器和namespace

1.安装 npm i --save vuex-class or yarn add vuex-class

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

vue-class-component(官方文档)

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

1.安装 npm i --save vue-class-component

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

导入和使用

// 导入部分
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直接定义为类的属性即可，computed需要定义为访问器属性，mixins方法原本通过mixins属性导入改为通过继承

类组件

@Component 装饰器使您的类成为Vue组件

import Vue from 'vue'
import Component from 'vue-class-component'

// Hello 类将是vue的组建
@Component
export default class Hello extends Vue {
   }

data

@Component
export default class Hello extends Vue {
   
  // data可以直接声明为类属性
  message = 'Hello World!'
}

methods

@Component
export default class Hello extends Vue {
   
  // methods可以直接声明为类方法
  hello() {
   
    console.log('Hello World!')
  }
}
</