[Vue2.x源码分析] 从入口开始
𝙸𝚜𝙻𝚊𝚗𝚍 6月18日 26 0 3 26 0 3

引入 Vue 的时候,发生了什么?

我们分析 Runtime+Compiler 版本的 Vue.js
分析 entry-runtime-with-compiler.js 可以发现它从 ./runtime/index 引入了 Vue

我们打开 ./runtime/index.js 可以发现又是一层套娃。该文件从 core/index 引入了 Vue

再打开 core/index ,结果发现,又又是一层套娃。该文件从 ./instance/index 引入了 Vue。

那我们再打开 ./instance/index ,终于发现了 Vue 的真正核心定义

可以发现,在我们引入 Vue 的时候,由内到外

  • core/instance/index 首先进行一系列的 Mixin
  • core/index 初始化全局 API initGlobalAPI
  • platforms/web/runtime/index.js 挂载了 __patch__$mount 方法
  • platforms/entry-runtime-with-compiler.js 根据平台相关缓存并修改 $mount 方法

这样的好处是分层,按照功能把不同功能分到不同层,当需要编译不同平台的 Vue.js 时只需要修改某一层的逻辑即可。这样写出来的代码思路更加清晰,也便于管理和维护。

扫码分享到移动端
3 条评论
江北LV4 评论于 6月18日 15:27

𝙸𝚜𝙻𝚊𝚗𝚍LV3 6月18日 15:44 回复 hfutsoraLV3

不急,干货在后面

hfutsoraLV3 6月18日 15:29:

虽然分享是好事,可是这篇文章干货也太少了。。

参与评论互动
登录即可参与评论互动哦