Vue源码系列之init过程属性方法变更图

前言

本文主要是总结在Core目录下出来的Vue在其实例vm,原型Vue.prototype,构造函数Vue上属性方法的变更情况,其中树形图从左到右为路径/

基础知识

vue不但可以在web浏览器上运行,也可以在移动端运行,移动端也就是weex版本,两者区别如下图

在web上可以分为两个版本,runtime only版本和runtime+compiler版本,区别是后者带有模板编译器,也就是可以将template模板编写html转换成render函数,而前者没有这个功能,需要写成render形式


2.png

另外在体积上,完整版比only版多了差不多1/2,图中可以看到,vue.js/vue.min.js是完整版,后者是压缩完整版基础上的压缩版,而vue.runtime.js/vue.runtime.min.js是runtime only版


不同版本的体积

在源码中,完整版和only版入口不一样


不同版本的入口文件

不同入口区别
1.png

可以看到无论是哪个版本都是在runtime/index出来的基础上做出相应的修改

这次走的是完整版入口


顺序

而在进入core之前,在runtime/index目录下,做出了下面的增添,也就是web版最外层的公共部分,以后就会在这基础上修改,从而使最终文件带有编译器或者不带编译器compiler


runtime.index.jpeg

下图开始的就是core/index出来的vue上添加的属性和方法,分为属性/方法名+数据类型的组合,已经用不同颜色标记


core/index.js core入口文件
part1.jpeg

Core/instance
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容