vue-class-component的简单使用

vue-class-component

vue对typescript支持的库

安装

npm install –save vue vue-class-component

基本语法

<script lang='ts'>
import { Component,Provide,Vue } from 'vue-property-decorator'
import { BaseAxios } from '../api/axios' 
import input from 'components/input.vue'

// 组件的引入
@Component({
    components: { input }
})

export default class Hello extends Vue {
    // data 
    obj: Object = {}
    msg: string = 'hello world'
    num: number = 0

    // methods
    addTimes (a: number) :number {
        this.num += a
        return this.num 
    }

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

    // 生命周期
    mounted() {
        BaseAxios.post('...').then( res=>{
            console.log(res)
        })
    }

}

</script>

createDecorator

自定义装饰器，接收一个回调函数作为第一个参数

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

export const NoCache = createDecorator((options,key)=>{
    options.computed[key].cache = false
})

// MyComp.js
import { NoCache } from './decorators'
@Component
class MyComp extends Vue {
    // computed属性不会被缓存
    @NoCache
    get random() {
        return Math.random()
    }
}

Component.registerHooks

自定义钩子

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

// 注册钩子name
Component.registerHooks([
    'beforeRouterEnter',
    'beforeRouterLeave',
    'beforeRouterUpdate',
])

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

@Component
class MyComp extends Vue {
    // 在组件内部为注册的钩子函数实现原型方法
    beforeRouterEnter(to,from,next) {
        console.log('before-router-enter')
        next()
    }
    beforeRouterLeave(to,from,next) {
        console.log('before-router-leave')
        next()
    }
}