vue-class-component源码阅读

vue-class-component是vue作者尤大推出的一个支持使用class方式来开发vue单文件组件的库。但是，在使用过程中我却发现了几个奇怪的地方。

首先，我们看一个简单的使用例子：

// 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/>'
})

在这个例子中，很容易发现几个疑点：

1. App类居然没有constructor构造函数；

2. 导出的类居然没有被new就直接使用了。

3. msg=123，这是什么语法？

首先，针对前两个疑问，需要说明一下，class不一定非得有构造函数，同样也不一定非得使用new才能使用。熟悉原理的朋友应该知道，class只是一个ES6的语法糖，说白了还是一个Function而已。但是，这两点无疑是class这个语法糖的重要价值所在，可这里却偏偏没用，不由让人奇怪，甚至会想，既然不当class用，那为什么不干脆就用Function呢？

而第三点，却是妥妥点的语法错误啊，为此我还特意打开了Chrome控制台试验了一下，确实报错了。实验结果如下：

image

那这到底是怎么回事呢？出于程序员的好奇心，我对vue-class-component的源码探索了一番。下面就一起来看看，相信看完就可以解答上面的疑惑了。

第一步，在看源码之前，必须对装饰器的知识有一定了解。装饰器种类有好几种，vue-class-component中主要用了类装饰器，本文只对类装饰器做简单介绍，更多信息请参阅阮老师的文章：ECMAScript 6入门。

类装饰器，顾名思义，就是用来装饰一个类的，说的直白点就是用于修改一个类的。它具体有两种用法。如下：

// 用法一
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 () {}

在两个用法中，我们将Decorator称为装饰器函数，DecoratorFactory称为装饰器工厂。

类装饰器函数规定只能接收类构造函数本身，如果还需要额外的参数传入，则需要使用装饰器工厂函数。

我们以装饰器工厂函数为例，说明其执行流程：

  • 1. JS引擎首先会执行工厂函数，然后保存其返回的装饰器函数；
  • 2. 然后解析class，将其转化为一个构造函数；
  • 3. 将上述构造函数作为参数执行第一步得到的装饰器函数。
  • 4. 如果装饰器函数有返回值，则会将类变量(如例子中的ClassTest变量)指向返回值，否则类变量仍然指向构造函数，基于JS引用变量的特点，即使仍指向原构造函数，这个构造函数也可能在装饰器中被改造过了。

直接使用装饰器函数的情况类似上面，只是少了装饰器工厂这一步处理过程。

了解了基本知识，我们开始第二步，解析vue-class-component执行流程。这里将根据装饰器的执行流程，分三个部分讲解。第一，工厂函数做了什么；第二，class解析之后是什么样的；第三，装饰器函数又做了什么。

工厂函数做了什么？

// vue-class-component使用的是TS语法
// Component实际上是既作为工厂函数，又作为装饰器函数
function Component (options: ComponentOptions<Vue> | VueClass<Vue>): any {
    if (typeofoptions==='function') {
        // 区别一下。这里的命名虽然是工厂，其实它才是真正封装装饰器逻辑的函数
        return componentFactory (options)
    }
    return function (Component:VueClass<Vue>){
        return componentFactory(Component,options)
    }
}

从源码中可以看出，Component函数只是对参数进行了判断，说明它既可以用作工厂函数，也可以用作装饰器函数。而实际装饰器的逻辑则被封装在componentFactory函数里，这里对命名需要注意区分下，此工厂非彼工厂。

Class解析之后是什么样的

在文章开头我们就有疑问，在class中不经过constructor直接给其属性赋值是不符合JS语法的，而且我们还在Chrome上试验过了，确实会报错。但我们在使用component-class-component时却又实实在在那么干了，并且也没什么问题，这是怎么回事呢？

事实上，Chrome等主流浏览器对于ES6以及更高级的ES7、ES8的支持是不完整的，很多功能特性都不支持，这也是我们平时为什么都会使用babel来将高级的ES语法转换成ES5的原因。而我们前面提及的这点疑惑正是这个原因，Chrome不支持，不代表babel不支持。

不过，即便如此，我们又产生了一个新的疑惑，这种语法我没见过，那么经过babel转换后的class会是什么样的呢？毕竟这个转换结果会作为参数传递 给Component装饰器来处理，要想了解Component的处理过程，这个参数需要先了解。

于是，我在Component函数内添加了一条console.log()，得到了打印后的结果，只是我使用的webpack+babel-loader执行的编译，结果比较难以阅读，我简单翻译了一下，并和class源码一起对比如下：

// 转换前
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)
}

由此，我们也可以推测出，一个.vue文件导出的类会被解析成什么样子。

装饰器函数又做了什么

此时，我们已经知晓了传递给装饰器函数的参数是什么样了。这个参数应该是一个构造函数，它的主体会对类实例的属性进行赋值，它的原型则携带着各种属性和方法。

而我们知道的，如果不使用vue-class-component，那么一个.vue文件应该导出如下对象：

export default {
    name: 'test'，
    data () {
        return {...}
    },
    computed: {
       com1 () {...},
       com2 () {...}
    },
    methods: {...},
    // 各种hook函数
}

很显然，装饰器函数必然是将传入的组件构造函数转换成了一个vue配置对象。那么，具体内部是怎么做的呢？我们来看看源码。（源码笔者加上了详细注释，但较长，可以直接跳过看后面的总结。）

// 这个函数就是封装了装饰器逻辑的函数，接受两个参数:
// 第一个是所装饰的类的构造函数；第二个是开发者传入的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
  // 获取构造函数原型，这个原型上挂在了该类的method
  const proto = Component.prototype
  // 遍历原型
  Object.getOwnPropertyNames(proto).forEach(function (key) {
    // 如果是constructor，则不处理。
    // 这也是为什么vue单文件组件类不需要constructor的直接原因，因为有也不会做任何处理
    if (key === 'constructor') {
      return
    }

    // 如果原型属性(方法)名是vue生命周期钩子名，则直接作为钩子函数挂载在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转换成构造函数的例子
      // 这里可能和普通的计算属性不太一样，因为一般计算属性只是用来获取值的，但这里却有setter。
      // 不过如果不使用setter，与非class方式开发无异，但有这一步处理，在某些场景会有特效。
      (options.computed || (options.computed = {}))[key] = {
        get: descriptor.get,
        set: descriptor.set
      }
    }
  })

  // 收集构造函数实例化对象的属性作为data，并放入mixins
  (options.mixins || (options.mixins = [])).push({
    data (this: Vue) {
      // 实例化Component构造函数，并收集其自身的(非原型上的)属性导出，内部还针对不同vue版本做了兼容。
      // 感兴趣的可以自己去瞅瞅源码，不复杂，在此不赘述。
      return collectDataFromConstructor(this, Component)
    }
  })

  // 处理属性装饰器，vue-class-component只提供了类装饰器。
  // 像props、components等特殊参数只能写在Component(options)的options参数里。
  // 通过这个接口可以扩展出属性装饰器，像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构造函数原型和其实例化对象的属性和方法。
  // 对于构造函数本身的静态属性还没有处理，在此处理，处理过程类似前面，不赘述。
  forwardStaticMembers(Extended, Component, Super)

  // 反射相关处理，这个是新特性，本人了解也不多，但到此已经不影响理解了，所以可以略过。
  // 如有对此了解的，欢迎补充。
  if (reflectionIsSupported) {
    copyReflectionMetadata(Extended, Component)
  }

  // 最终返回这个vue实例对象
  return Extended
}

源码较长，在此总结一下。这里主要做了四件事：

  • 第一，将传入的构造函数原型上的属性放入data中，将方法根据是否是生命周期钩子、是否是计算属性，来分别放入对应的位置。
  • 第二，实例化构造函数，将构造函数实例化对象的属性放入data，实例化对象本身(不算原型上的)是不带有方法的，即使某个属性的值是function类型，也应该作为data来处理。
  • 第三、对构造函数自身的静态属性和方法处理，处理方式同原型的处理方式。
  • 第四，提供属性装饰器的拓展功能，Component只装饰了类，如果想对类中的属性做进一步的处理，可以从此入手，比如vue-property-decorator库提供的那些装饰器就是依赖这个拓展功能。

说到此，想必大家对前面的疑惑也释然了，同时对vue-class-component的实现原理也有了一个大体的思路。因本人技术有限，文中可能存在肤浅、错误的地方，如有发现，还请不吝赐教，感谢！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,390评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,821评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,632评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,170评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,033评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,098评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,511评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,204评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,479评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2赞 335