一、概述
通过上一篇重读Vue源码系列三—— “一无所有”的Vue构造函数我们了解到实际上Vue就是用Function以及prototype实现的类。
Vue的构造函数非常简单,其实就一行代码,如下
function Vue (options) {
this._init(options)
}
我们知道Vue给我们提供了大量的实例属性、全局API,比如
- Vue的实例属性
- Vue的静态属性
其实这些都是通过原型来实现的。
二、如何实现呢?
- 通过原型来实现
其实Vue的实例属性和Vue的静态属性的最大区别是静态属性中是获取不到Vue的实例vm(vm = new Vue())或者this(this就是vm),静态属性中的this是Vue构造函数
比如我们写一个VTest构造函数,实现一个静态属性Set和一个原型属性$Set,遵循Vue的规范,原型属性前面都加了$
function VTest() {
this.a = 1
}
funtion initSet(VTest) {//初始化原型属性
VTest.prototype.$Set = function() {
console.log('prototype',this.a);
//可以打印出1
}
}
funtion initSetAPI(VTest) {//初始化原型属性
VTest.Set = function() {
console.log('VTest', this.a); //打印不出1
console.log('VTest', this.a);
} //静态属性
}
initSet(VTest) //初始化
initSet(initSetAPI) //初始化全局API
let VTestObj = new VTest()
VTestObj.$Set(); //会被实例化,类似于Vue实例的实例属性
VTest.Set(); //不会被实例化,其实就是Vue提供的全局API
Vue内部确实也是这么实现的~
看到这里你或许就会恍然大悟了,接下来就可以像庖丁解牛般的去拆解每个功能源码了~
三、后续计划
接下来将会根据Vue构造函数的初始化顺序来讲解每个子功能点~