Vue源码学习（一）——追根究底Vue

Harriet666 发布于2019-08-23 13:55 / 771人阅读

摘要：其中执行命令是我们当前所关注的，对于项目的文件结构，我们需要去找到项目的启动的入口文件，接下来我们去一步一步的找到分析命令是一个模块打包器。

打算开始学习vue的源码开始，我开始 serach 关键词：vue 源码，可是发现很多都不是我想要看到的东西，所以打算记录下来，学习的记录和日后分享。我在想这个文章的名字时，手把手系列？十分钟系列？小白到大佬系列？都不是，只是单纯的学习笔记

文件结构

当我从 github 上 clone Vue 源码后，我看到很多熟悉的文件夹命名，以及配置文件，但对于我个小菜鸡，我还是想整体了解一下每个文件夹的内容，然后再去深挖~
有些我自己现在还不是很懂的后续再补上~

├─benchmarks
├─dist   打包后文件目录
├─examples 部分示例
├─flow  声明静态类型
├─packages  vue可被分成的其他npm包
│  ├─vue-server-renderer
│  ├─vue-template-compiler
│  ├─weex-template-compiler
│  └─weex-vue-framework
├─scripts 
├─src   主要源码
│  ├─compiler
│  ├─core   核心代码
│  ├─platforms  平台相关内容
│  ├─server 服务端渲染相关
│  ├─sfc
│  └─shared
├─test  测试用例
└─types 类型定义
    └─test

从入口文件开始

首先，我们拿到一个文件后，我们应该养成习惯去查看项目根目录下的package.json文件。文件的基本构成：项目名称、版本、描述、执行命令、项目依赖等。
其中执行命令 script是我们当前所关注的，对于项目的文件结构，我们需要去找到项目的启动的入口文件，接下来我们去一步一步的找到vue

分析命令

"scripts": {
  "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
}

rollup是一个 JavaScript 模块打包器。感兴趣的话可以去具体的研究，这里我们不做具体的探究。那我们知道这里它存在的作用就是对js进行打包处理。

我们来具体看一下这个命令的含义：

-w watch 监听源文件是否有改动，有改动重新打包

-c config 使用配置文件 scripts/config.js

--environment 传递给配置文件的环境变量，这里传递的是目标文件 TARGET

根据以上，我们可以得知，该命令为使用 scripts/config.js中的配置文件去打包 TARGET:web-full-dev,我们想知道这个targt 具体指的是什么，我们需要去看一下config配置文件

层层递进

1.scriptsconfig.js 中我们可以找到，最下方为该文件的js执行部分，其中先去判断了我们所传入的Target，然后调用了genConfig

//  判断传入的环境变量
if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET)
}

2.我们继续往上看，genconfig根据函数名我们可以得知，为获取config这样的一个功能，Target为传入的name,文件的上方定义了 builds,一个属性对应一个Target*，这样我们可以找到我们专注的web-full-dev

// builds 对象，属性名对应Target
const builds = {
  // ...

  // Runtime+compiler development build (Browser)
  "web-full-dev": {
    entry: resolve("web/entry-runtime-with-compiler.js"),
    dest: resolve("dist/vue.js"),
    format: "umd",
    env: "development",
    alias: { he: "./entity-decoder" },
    banner
  }

  // ...
}

// ...

// 这里传入的name 就是Target
function genConfig (name) {
  const opts = builds[name]
  // ... other config
}

从上可以看出，我们需要的是入口文件即entry中对应的web/entry-runtime-with-compiler.js

3.打开entry-runtime-with-compiler.js, 在文件上方，我们可以看到这个文件中import Vue,我们所需要的是去追根到Vue的起始，所以就找到了上一层runtime/index

// 引入了Vue的实例
import Vue from "./runtime/index"

4.打开上一步我们找到的src/platforms/web/runtime/index.js 文件，第一行就引入了import Vue from "core/index"
没关系我们继续，酒香不怕巷子深
5.srccoreindex.js

// 又一次是引入了Vue的实例
import Vue from "./instance/index"

6.src/core/instanceindex.js，惊喜~ ,在这里我们找到了Vue的构造函数，构造函数中仅调用了init方法，_init方法哪里来的呢，当然是文件下方在Vue原型上绑定的方法，接下来我们会以一个的去

// Vue的构造函数
function Vue (options) {
  //... 验证环境
  this._init(options)
}

// 在Vue原型上绑定实例方法
initMixin(Vue)  // init
stateMixin(Vue)  // $set $delete $watch
eventsMixin(Vue)  // $on $once $off $emit
lifecycleMixin(Vue)  // _update $forceUpdate $destroy
renderMixin(Vue)  // $nextTick _render

总结

综上，小结一下追根过程

package.json
--> scripts/config.js
--> web/entry-runtime-with-compiler.js
--> src/platforms/web/runtime/index.js
--> src/core/index.js
--> src/core/instance/index.js

下一篇：Vue源码学习（二）——从宏观看Vue

云服务器 GPU云服务器 vue源码 vue webrtc 源码 vue3 学习笔记 (五)——vue3 Vue_Vue

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99792.html

javascript基础-Vue数据绑定前奏对象属性

摘要：关于有人说我用删除这个属性不就好了之后打印发现它还是一只哈士奇。如下的解释如下操作符会从某个对象上移除指定属性。 javascript-Object-Property ? javascript-对象的属性的延伸学习 showImg(https://segmentfault.com/img/bVNH2S?w=640&h=640); 前言在学习vue数据绑定的较底层原理时，被setter...

zebrayoung 2019-08-20 16:33 评论0 收藏0
小白成长日记：写个日历

摘要：一周有天，返回的数，如果上月最后一天是星期二，看下的日历是补了三天，我们得到的是，所以为此，之后就是填充最后一天，用处理一下再排序，上一个月的数据就得到了。每天进步一点点。写个简单的小日历，依旧用vue，方便完成图 showImg(https://segmentfault.com/img/bVZoWs?w=416&h=495); 思路本月的天数截取上月的天数截取下月天数今...

muzhuyu 2019-08-21 17:50 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
vue源码学习（一）——从入口开始

摘要：学习源码时，我们首先需要看的是文件，该文件里配置了的依赖以及开发环境和生产环境的编译的启动脚本等其他信息。一个是完整版，一个是运行时。运行时用来创建实例渲染并处理虚拟等的代码。基本上就是除去编译器的其它一切。学习vue源码时，我们首先需要看的是package.json文件，该文件里配置了vue的依赖以及开发环境和生产环境的编译的启动脚本等其他信息。首先我们需要关注的是script。我...

ybak 2019-08-23 12:41 评论0 收藏0
vue 源码学习（一）目录结构和构建过程简介

摘要：框架使用了作为类型检查，来保证项目的可读性和维护性。的主目录下有的配置文件，还有目录，指定了各种自定义类型。表示构建出来的文件遵循规范。 Flow vue框架使用了Flow作为类型检查，来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件，还有flow目录，指定了各种自定义类型。在学习源码前可以先看下Flow的语法官方文档目录结构 vue....

lavnFan 2019-08-23 14:36 评论0 收藏0