class-baesd compontent
这个是官方的称呼,翻译过来就是基于类的组件。 一直以来组件都是一个对象形式的,下面来认识下基于类的组件吧~
相比于比较常用的export
一个对象,类的形式要额外引入两个包: npm
、vue-property-decorator
。 其次我们还要在class
定义前面加入@Component
修饰器,这样一个简单的class-based
组件就完成了。
关于修饰器的用法看这里
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
@Compontent
export default class Hello extends Vue {
// data property
name = 'teal'
// life hook
mounted() {
}
// method
greet() {
console.log(`hello ${this.name}`)
}
}
复制代码
下面两个是vue-property-decorator
自带的,注意都是大写开头的
export default class Hello extends Vue {
// watch的使用
// 这里的name属性默认为null,故可以不用定义
// 第一个参数为要监听的属性名,第二个参数为监听配置
@Watch('name', { immidate: false, deep: true })
toWatchName(value, oldValue) {
}
// computed的使用
get computedName() {
return `computed ${this.name}`
}
}
复制代码
// decorates.js
export const log = function (msg) {
return function (target, key, descriptor) {
let fn = descriptor.value
descriptor.value = function () {
console.log(`${key} calling, log ${msg}`)
return fn.apply(this, arguments)
}
return descriptor
}
}
}
复制代码
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { log } from './decorates.js'
@Component
export default class Hello extends Vue {
@log('extra msg')
greet() {
// do stuff
}
}
复制代码
还有一个vue-class-component
我们下次再讲
参考: