Vue—Typescript
Vue-cli推出了3.0,自带了Pwa和Typescript,尝试了下发现Typescript用起来十分方便,这里简单介绍下。这次脚手架项目中用到了2个插件,vue-class-component和vue-property-decorators。这里介绍下使用方法vue-class-componentNote:1.如果使用Typescript,那么需要使用--experiment...
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。
更多推荐
所有评论(0)