重读Vue源码系列四—— “一无所有”的Vue如何实现全局API以及实例属性

323 阅读1分钟

一、概述

通过上一篇重读Vue源码系列三—— “一无所有”的Vue构造函数我们了解到实际上Vue就是用Function以及prototype实现的类。

Vue的构造函数非常简单,其实就一行代码,如下

function Vue (options) {
  this._init(options)
}

我们知道Vue给我们提供了大量的实例属性、全局API,比如

  • Vue的实例属性

image.png

  • Vue的静态属性

image.png

其实这些都是通过原型来实现的。

二、如何实现呢?

  • 通过原型来实现

其实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内部确实也是这么实现的~

image.png

看到这里你或许就会恍然大悟了,接下来就可以像庖丁解牛般的去拆解每个功能源码了~

三、后续计划

接下来将会根据Vue构造函数的初始化顺序来讲解每个子功能点~

image.png

下一篇将讲解重读Vue源码系列五—— 逐步揭开Vue构造函数实现原型属性的面纱