// App.vue
<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg=123

  // use prop values for initial data
  helloMsg='Hello, '+this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

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

  // method
  greet () {
    alert('greeting: '+this.msg)
  }
}
</script>

//main.js
import App from './App.vue'

newVue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

// 用法一
function Decorator (target) {  
  // 處理target  
  return target
}

@Decorator
class ClassTest () {}

// 用法二
function DecoratorFactory (options) {  
  return function Decorator (target) {    
    //@todo 利用options一起處理target     
    // 然后返回 
    return target  
  }
}

@DecoratorFctory(options)
class ClassTest () {}

// vue-class-component使用的是TS語(yǔ)法
// Component實(shí)際上是既作為工廠函數(shù)，又作為裝飾器函數(shù)
function Component (options: ComponentOptions<Vue> | VueClass<Vue>): any {
  if (typeofoptions==='function') {
    // 區(qū)別一下。這里的命名雖然是工廠，其實(shí)它才是真正封裝裝飾器邏輯的函數(shù)
    return componentFactory (options)
  }
  return function (Component:VueClass<Vue>){
    return componentFactory(Component,options)
  }
}

// 轉(zhuǎn)換前
class User {
  name = 'yl'
  age = 10

  get computeMethod () {
    cnsole.log(1)
  }

  method () {
    console.log(2)
  }
}

// 轉(zhuǎn)換后
function User () {
  this.name = 'yl'
  this.age = 10
}

// 計(jì)算屬性定義
User.prototype.defineProperty(this, 'computeValue', {
  get () {
    console.log(1)
    return this.name
  }
})

User.prototype.method = function () {
  console.log(2)
}

export default {
  name: 'test'，
  data () {
    return {...}
  },
  computed: {
    com1 () {...},
    com2 () {...}
  },
  methods: {...},
  // 各種hook函數(shù)
}

// 這個(gè)函數(shù)就是封裝了裝飾器邏輯的函數(shù)，接受兩個(gè)參數(shù):
// 第一個(gè)是所裝飾的類的構(gòu)造函數(shù)；第二個(gè)是開(kāi)發(fā)者傳入的mixins對(duì)象
function componentFactory (
 Component: VueClass<Vue>,
 options: ComponentOptions<Vue> = {}
): VueClass<Vue> {
 // 首先給options.name賦值，確保最終生成的對(duì)象具有name屬性。
 options.name = options.name || (Component as any)._componentTag || (Component as any).name
 // 獲取構(gòu)造函數(shù)原型，這個(gè)原型上掛在了該類的method
 const proto = Component.prototype
 // 遍歷原型
 Object.getOwnPropertyNames(proto).forEach(function (key) {
  // 如果是constructor，則不處理。
  // 這也是為什么vue單文件組件類不需要constructor的直接原因，因?yàn)橛幸膊粫?huì)做任何處理
  if (key === 'constructor') {
   return
  }

  // 如果原型屬性(方法)名是vue生命周期鉤子名，則直接作為鉤子函數(shù)掛載在options最外層
  if ($internalHooks.indexOf(key) > -1) {
   options[key] = proto[key]
   return
  }
  // 先獲取到原型屬性的descriptor。
  // 在前文已提及，計(jì)算屬性其實(shí)也是掛載在原型上的，所以需要對(duì)descriptor進(jìn)行判斷
  const descriptor = Object.getOwnPropertyDescriptor(proto, key)!
  if (descriptor.value !== void 0) {
   // 如果屬性值是一個(gè)function，則認(rèn)為這是一個(gè)方法，掛載在methods下
   if (typeof descriptor.value === 'function') {
    (options.methods || (options.methods = {}))[key] = descriptor.value
   } else {
    // 如果不是，則認(rèn)為是一個(gè)普通的data屬性。
    // 但是這是原型上，所以更類似mixins，因此掛在mixins下。
    (options.mixins || (options.mixins = [])).push({
     data (this: Vue) {
      return { [key]: descriptor.value }
     }
    })
   }
  } else if (descriptor.get || descriptor.set) {
   // 如果value是undefined(ps：void 0 === undefined)。
   // 且描述符具有g(shù)et或者set方法，則認(rèn)為是計(jì)算屬性。不理解的參考我上面關(guān)于class轉(zhuǎn)換成構(gòu)造函數(shù)的例子
   // 這里可能和普通的計(jì)算屬性不太一樣，因?yàn)橐话阌?jì)算屬性只是用來(lái)獲取值的，但這里卻有setter。
   // 不過(guò)如果不使用setter，與非class方式開(kāi)發(fā)無(wú)異，但有這一步處理，在某些場(chǎng)景會(huì)有特效。
   (options.computed || (options.computed = {}))[key] = {
    get: descriptor.get,
    set: descriptor.set
   }
  }
 })

 // 收集構(gòu)造函數(shù)實(shí)例化對(duì)象的屬性作為data，并放入mixins
 (options.mixins || (options.mixins = [])).push({
  data (this: Vue) {
   // 實(shí)例化Component構(gòu)造函數(shù)，并收集其自身的(非原型上的)屬性導(dǎo)出，內(nèi)部還針對(duì)不同vue版本做了兼容。
   // 感興趣的可以自己去瞅瞅源碼，不復(fù)雜，在此不贅述。
   return collectDataFromConstructor(this, Component)
  }
 })

 // 處理屬性裝飾器，vue-class-component只提供了類裝飾器。
 // 像props、components等特殊參數(shù)只能寫(xiě)在Component(options)的options參數(shù)里。
 // 通過(guò)這個(gè)接口可以擴(kuò)展出屬性裝飾器，像vue-property-decorator庫(kù)那種的屬性裝飾器
 const decorators = (Component as DecoratedClass).__decorators__
 if (decorators) {
  decorators.forEach(fn => fn(options))
  delete (Component as DecoratedClass).__decorators__
 }

 // 獲取Vue對(duì)象
 const superProto = Object.getPrototypeOf(Component.prototype)
 const Super = superProto instanceof Vue
  ? superProto.constructor as VueClass<Vue>
  : Vue
 // 通過(guò)vue.extend生成一個(gè)vue實(shí)例
 const Extended = Super.extend(options)

 // 在前面只處理了Component構(gòu)造函數(shù)原型和其實(shí)例化對(duì)象的屬性和方法。
 // 對(duì)于構(gòu)造函數(shù)本身的靜態(tài)屬性還沒(méi)有處理，在此處理，處理過(guò)程類似前面，不贅述。
 forwardStaticMembers(Extended, Component, Super)

 // 反射相關(guān)處理，這個(gè)是新特性，本人了解也不多，但到此已經(jīng)不影響理解了，所以可以略過(guò)。
 // 如有對(duì)此了解的，歡迎補(bǔ)充。
 if (reflectionIsSupported) {
  copyReflectionMetadata(Extended, Component)
 }

 // 最終返回這個(gè)vue實(shí)例對(duì)象
 return Extended
}