深入理解vue-class-component源碼閱讀

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

// 轉換前
class User {
  name = 'yl'
  age = 10

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

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

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

// 計算屬性定義
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ù)
}

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

  // 如果原型屬性(方法)名是vue生命周期鉤子名，則直接作為鉤子函數(shù)掛載在options最外層
  if ($internalHooks.indexOf(key) > -1) {
   options[key] = proto[key]
   return
  }
  // 先獲取到原型屬性的descriptor。
  // 在前文已提及，計算屬性其實也是掛載在原型上的，所以需要對descriptor進行判斷
  const descriptor = Object.getOwnPropertyDescriptor(proto, key)!
  if (descriptor.value !== void 0) {
   // 如果屬性值是一個function，則認為這是一個方法，掛載在methods下
   if (typeof descriptor.value === 'function') {
    (options.methods || (options.methods = {}))[key] = descriptor.value
   } else {
    // 如果不是，則認為是一個普通的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)。
   // 且描述符具有get或者set方法，則認為是計算屬性。不理解的參考我上面關于class轉換成構造函數(shù)的例子
   // 這里可能和普通的計算屬性不太一樣，因為一般計算屬性只是用來獲取值的，但這里卻有setter。
   // 不過如果不使用setter，與非class方式開發(fā)無異，但有這一步處理，在某些場景會有特效。
   (options.computed || (options.computed = {}))[key] = {
    get: descriptor.get,
    set: descriptor.set
   }
  }
 })

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

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

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

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

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

 // 最終返回這個vue實例對象
 return Extended
}