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();
}
}