vue class组件

Vue class 组件带来的优点

vue英文官网推荐了一个叫vue-class-component的包，可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利：

• methods 可以直接声明为类的成员方法，钩子都可以直接写作class的方法
• 计算属性可以直接通过get来获得，可以被声明为类的属性访问器
• data、render 以及所有的 Vue 生命周期可以直接作为类的成员方法
• 所有其他属性，都可以放到Component装饰器里

Vue class 类组件的基本结构：

import Vue from ‘vue‘;
import Componet from ‘vue-class-component‘;

require(‘./XXX.template.scss‘);

@Component({
    template: require(‘./XXX.template.html‘),
    props: {
        firstName: String,
        lastName: String
    },
    components: {
        ‘component-a‘: ComponentA
    }
})
export class XXXX extends Vue {
    firstName: string;
    lastName: string;
    
    //初始data
    middleName = ‘middle‘;
    
    //computed 属性
    get fullName() {
        return this.firstName + this.lastName;
    }
    
    //method
    hello() {
        alert(`Hello ${this.fullName}!`);
    }
    
    //钩子
    mounted() {
        this.hello();
    }
}

参考