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!')
  }
}

computed

@Component
export default class Hello extends Vue {
  name = 'John'
  
  // computed声明为类属性getter / setter
  get name() {
    return this.name
  }
  set name(value) {
    this.name= value
  }
}

生命周期钩子

@Component
export default class HelloWorld extends Vue {
  // 所有Vue生命周期挂钩也可以直接声明为类原型方法，但是您不能在实例本身上调用它们。
  // 声明自定义方法时，应避免使用这些保留名称。
  mounted() {
    console.log('mounted')
  }
}

注册钩子

使用Vue Router等Vue插件，可能希望类组件解析它们提供的钩子
在这种情况下，Component.registerHooks允许注册钩子
注册钩子后，类组件将它们实现为类原型方法
注意：必须在组件定义之前对其进行注册

import Component from 'vue-class-component'
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

原写法：

export default {
  data () {
    return {
      msg: 'msg'
    }
  },
  methods: {
    hello () {}
  },
  mounted() {}, 
  computed: {
    newmsg () {
      return 'new ' + this.msg
    }
  }
}

mixins

Vue类组件提供了mixins辅助功能，以类样式方式使用mixins。通过使用mixins帮助程序，TypeScript可以推断混合类型并在组件类型上继承它们。
注意：所有mixin必须声明为类组件

// 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'

@Component
export class HelloWorld extends mixins(Hello, World) {
  created () {
    console.log(this.hello + ' ' + this.world + '!')
  }
}

其他的部分(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 {}

props

Vue类组件没有提供用于props定义的专用API。但是，可以通过Vue.extend来实现

const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})

@Component
export default class Greeting extends GreetingProps {
  get message(): string {
    // this.name will be typed
    return 'Hello, ' + this.name
  }
}

extends 被占用了，如果想继承类组件或者混入时，可以使用mixins来实现

import Vue from 'vue'
import Component, { mixins } from 'vue-class-component'
import Super from './super'

const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})

@Component
export default class Greeting extends mixins(GreetingProps, Super) {
  get message(): string {
    return 'Hello, ' + this.name
  }
}

$refs

$refs组件的类型声明为处理所有可能的ref类型的最广泛的类型。虽然理论上是正确的，但在大多数情况下，每个ref在实践中仅具有特定的元素或组件。
可以通过覆盖$refs类组件中的类型来指定特定的引用类型

<template>
  <input ref="input">
</template>

@Component
export default class InputFocus extends Vue {
  // `!` (显式赋值断言，就是由用户自己保证，这个属性在使用前会初始化，类型检查不管这个属性了)
  // 这样就可以消除编译错误
  $refs!: {
    input: HTMLInputElement
  }

  mounted() {
    this.$refs.input.focus()
  }
}

vuex

import Vue from 'vue'
import Component from 'vue-class-component'
import { mapGetters, mapActions } from 'vuex'
import { Post } from './post'

@Component({
  computed: mapGetters([
    'posts'
  ]),
  methods: mapActions([
    'fetchPosts'
  ])
})
export default class Posts extends Vue {
  posts!: Post[]
  fetchPosts!: () => Promise<void>

  mounted() {
    this.fetchPosts().then(() => {
      console.log(this.posts)
    })
  }
}

最后

以上就是孤独电灯胆为你收集整理的Vue装饰器写法-vue-class-componentVue装饰器写法的全部内容，希望文章能够帮你解决Vue装饰器写法-vue-class-componentVue装饰器写法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。