Vue—Typescript

Vue-cli推出了3.0，自带了Pwa和Typescript，尝试了下发现Typescript用起来十分方便，这里简单介绍下。

这次脚手架项目中用到了2个插件，vue-class-component和vue-property-decorators。这里介绍下使用方法

vue-class-component

Note:

1.如果使用Typescript，那么需要使用--experimentalDecorators

2.组件方法可以声明为类的方法

3.计算属性可以声明为类的set/get

4.data可以声明为类的属性

5.自带的声明周期也可以声明为类的方法，但是不能调用它，并且声明方法时避免用这些预设的方法名以免冲突。

下面例子可以说明以上几点：

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

Mixins：

vue-class-component提供了一个mixins接口，来让我们愉快使用mixins，通过这个mixins接口可以让Typescript推断出mixins里内容的类型并将其混合入组件之中。下面是官方的例子：

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

// You can declare a mixin as the same style as components.
@Component
export class MyMixin extends Vue {
  mixinValue = 'Hello'
}

//index.vue
import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.js'

// Use `mixins` helper function instead of `Vue`.
// `mixins` can receive any number of arguments.
@Component
export class MyComp extends mixins(MyMixin) {
  created () {
    console.log(this.mixinValue) // -> Hello
  }
}

装饰器：

vue-class-component提供了一个createDecorator接口，允许我们使用自定义装饰器，createDecorator接受一个回调函数，回调函数接受3个参数：

1.options 组建的参数对象，包括比如组件里的computed，created等等

2.key 应用这个装饰器的属性或者方法名

3.parameterIndex 如果这个装饰器用于装饰一个数组，则这个参数表述数组下标

官方实例：

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

export const NoCache = createDecorator((options, key) => {
  // component options should be passed to the callback
  // and update for the options object affect the component
  options.computed[key].cache = false
})


//index.vue
import { NoCache } from './decorators'

@Component
class MyComp extends Vue {
  // the computed property will not be cached
  @NoCache
  get random () {
    return Math.random()
  }
}

钩子函数

除了created，mounted等，有些插件也会用到钩子，比如我们熟悉的Vue-router提供的beforeRouterEnter等，这时需要使用

vue-class-component提供的Component.registerHooks来注册钩子。

官方实例：

// class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
])


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

@Component
class MyComp extends Vue {
  // The class component now treats beforeRouteEnter
  // and beforeRouteLeave as Vue Router hooks
  beforeRouteEnter () {
    console.log('beforeRouteEnter')
  }

  beforeRouteLeave () {
    console.log('beforeRouteLeave')
  }
}


// main.js

// Make sure to register before importing any components
import './class-component-hooks'

import Vue from 'vue'
import MyComp from './MyComp'

new Vue({
  el: '#app',
  components: {
    MyComp
  }
})

其余注意事项

1.不要在在class的属性或者存储器中使用箭头函数。因为箭头函数在定义时确定了执行的上下文this，无法再被改变。然而vue是通过在初始代理this自动绑定到vue实例。

2.不能初始属性的值为undefined，不然这个值会被忽略，除非使用data(){}来定义一个值为undefined的属性。

vue-property-decorator

这个包提供了8种装饰器，但是这个包不支持元数据。

具体的用法可以参考https://github.com/kaorun343/vue-property-decorator。

vue-class-component

猜你喜欢