vue中的class-based compontent

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}`)
    }
}
复制代码

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
    }
}
复制代码