vue源码分析入口---三分一把刀

我是三分一把刀。

这篇blog,咱们正式开始分析源代码,只会分析逻辑精神,不分析每一行代码。

一,开始

        版本:Vue.version = '2.6.10';

        目录图:


很明显可以知道框架的入口在core/index.js,根据引入的文件可以大概知道每个文件的大概实现内容。由于之前看源代码还是16年,并且版本还是1.xx版本的,这里我会重新的去复盘一下新的源码,挑核心的精髓和大家一起学习,如果有误,希望大家可以指正。

1.1 方法 initGlobalAPI(Vue)

   

可以明白,首先调用的方法是extend方法,然后initUse,initMixin,initExtend,initAssetRegister

extend方法

extend将builtInComponents的方法属性复制到Vue.options.components上,这里extend方法暂时就不具体详解。

总觉得有点心里不安,估计有人找不到代码,在shared/util里面,源代码贴出来。这里说下,这个文件夹下其实就是些公用的工具类,源代码里面如果看见某些方法却找不到定义的地方,可以来这里找找。


initUse 方法

initUse 初始化vue插件的方法,就是初始化vue.use方法,做过vue单页面的就知道,在入口文件经常会看到Vue.use(VueRouter),这个其实就是初始化vue-router路由,看源代码的意思是如果已经有加载过插件,则返回,没有则添加进入。源代码可以自己阅读。

initMixin方法

initMixin注册初始化混合对象,按我的理解比如是给vue定制全局参数,不过注意不要和vm的默认参数或者方法重复就好。

initExtend方法

和initMixin方法差不多,上面是给全局注册,而initExtend是绑定给实例对象上


initAssetRegisters方法

把ASSET_TYPES的项当作vue实例的方法注册,包含'component',  'directive','filter',当中框架会检测名称是否可以使用,重复的话会报错。

我是三分一把刀,一起来分析vue源代码。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容