Vue.js源码解析-源码目录及源码调试运行

目录

前言

记住框架的api是能让我们熟练的使用框架，但优秀的施工人员和优秀的设计师，两者还是有本质的区别。框架的api是如何实现的，如果是我们通过源码调试找到的答案，相信一定会让自己印象深刻。学习源码的工程化编码风格，理解用到的设计模式，算法等，想必对自己的成长大有裨益。

1 代码结构

1.1 octotree插件

给大家安利一个github上看代码的小插件，octotree，https://www.octotree.io。可以看到vue2版本的项目结构如下图。

1.2 vue工程项目目录

可以在控制台中运行tree命令，将目录成树状打印。

  ├─.circleci
  ├─.github
  ├─benchmarks
  ├─dist        ## 发布的目标目录
  ├─examples    ## vue相关的使用举例
  ├─flow        ## 针对flow的类型声明
  ├─packages    ## core核心代码之外的其他一些功能包
  ├─scripts     ## 项目构建脚本
  ├─src         ## vue主要源码
  ├─test        ## 对于vue相关api单元测试以及使用举例的端对端测试等
  └─types       ## TypeScript类型声明

1.3 主要代码目录src

vue.js主要实现逻辑都在src资源目录下，这里先对主要目录进行一个简单的描述。

  ├─compiler        ## 编译生成render函数相关
  │  ├─codegen
  │  ├─directives       
  │  └─parser
  ├─core            ## vue.js核心代码，实例化、响应式等
  │  ├─components       
  │  ├─global-api       
  │  ├─instance
  │  │  └─render-helpers
  │  ├─observer
  │  ├─util
  │  └─vdom
  │      ├─helpers      
  │      └─modules
  ├─platforms      ## vue.js 对web端和weex端的分别支持
  │  ├─web
  │  │  ├─compiler
  │  │  │  ├─directives
  │  │  │  └─modules
  │  │  ├─runtime
  │  │  │  ├─components
  │  │  │  ├─directives
  │  │  │  └─modules
  │  │  ├─server
  │  │  │  ├─directives
  │  │  │  └─modules
  │  │  └─util
  │  └─weex
  │      ├─compiler
  │      │  ├─directives
  │      │  └─modules
  │      │      └─recycle-list
  │      ├─runtime
  │      │  ├─components
  │      │  ├─directives
  │      │  ├─modules
  │      │  └─recycle-list
  │      └─util
  ├─server         ## 服务端渲染ssr相关
  │  ├─bundle-renderer
  │  ├─optimizing-compiler
  │  ├─template-renderer
  │  └─webpack-plugin
  ├─sfc            ## .vue单文件组件解析相关
  └─shared         ##  web端和服务端渲染的公共代码

compiler

这个目录包含编译相关的代码，简单来说就是将 vue 的 template 字符串模板解析成 ast 抽象语法树，进而转换为 render 渲染函数。

core

这个目录包含vue的核心代码，封装了通用的全局组件、全局api、构造函数、响应式、工具方法，虚拟dom等。

platforms

这个目录包含跨端实现的相关代码，内部主要扩展了对weex的跨端开发的支持。里面的weex目录是对weex端的适配，web目录是对浏览器端的适配。

server

这个目录包含服务端渲染ssr实现的相关代码。

sfc

这个目录包含对vue单文件组件解析的相关代码，主要功能是将.vue 文件的内容解析成，符合单文件组件 (SFC) 规范的js描述对象。 https://vue-loader.vuejs.org/zh/spec.html vue-loader 文档中也有提到。

shared

这个目录包含一些公共配置项和方法。vue的web端和ssr服务端渲染都可以使用。

2 下载代码并运行构建

这里主要先对 vue 的2版本的源码进行分析，vue-next 3版本新特性会在后续文章中进行分析，如基于proxy实现的数据响应式，虚拟dom等。

2.1 源代码下载

这里选择2版本中最新的2.6.12版本进行下载。

2.2 打开项目安装依赖

用 npm i 或者 yarn add all 进行依赖包的安装。

2.3 package.json 的 scripts 配置中添加 --sourcemap

添加 --sourcemap，运行npm run dev 或者 yarn dev 生成带编译器版本的vue.js和其对应的.map 文件。我们在编写demo调试的时候，引用dist/vue.js文件，通过vue.js.map，在浏览器中调试，就能关联到对应的源码文件。如图所示。

3 编写demo进行调试

在源码项目中创建自己的demo目录，写一个简单的示例。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>init demo</title>
      <script src="../dist/vue.js"></script>
  </head>
  <body>
      <div id="app">{{title}}</div>
      <script>
          new Vue({
              data: {
                  title: "vue调试"
              }
          }).$mount("#app");
      </script>
  </body>
  </html>

断点调试的时候，你就能看到 sidebar 中对应的源码src目录。

ctrl + p 可以搜索指定的源码文件

posted @ 2021-05-07 10:58  骆三疯  阅读(1174)  评论(2)  编辑  收藏  举报