一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情

vue源码阅读记录-阅读环境和目录解构

最近在学习vue3，发现了很多和vue2思想完全不一样的东西， 回头一想，发现vue2用了那么多年，源码到现在还没有阅读过，因此有了阅读vue2源码的想法。这里主要记录我在学习源码的过程和一些想法。

起步

如何开始学习源码： 当然要先找到源码，github上搜索vue，选中最新版本

下载到本地

使用编辑器打开代码，在根目录创建一个html，引入js中的dist的vue.js文件

debugger
let vue = new Vue({
      el: '#app',
      data: {
        message:'121'
      }
    })

开始调试,vscode这里使用preview on web Server插件。

打开页面看到debugger后，点击小尖头，进入方法内部看具体的内容，这边比较基础就不继续说了。

项目解构

我们这边主要看src中的子目录

• compiler这个目录主要存放了一些编译相关的代码
• core就是整个vuejs的核心代码
  • components 是组件相关的代码
  • global-api 是全局api相关的代码
  • instance vue实例，渲染、初始化、等等相关的代码
  • abserver 就是核心的一些概念性的东西
  • util 一些工具类
  • vdom 是一些虚拟dom的相关代码
• platforms 平台相关的代码
  • web 平台相关实现的代码
  • weex weex平台相关的代码
• server server-redner的相关代码
• sfc 就是一个解释器
• shared是一个公用类库。

代码目录相关的就是这么多，了解每个目录是干嘛的，很重要，记住相关结构会对后面解读vue源码起着重要的作用。