当学习成为了习惯,知识也就变成了常识。 感谢各位的 点赞收藏评论

新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn

文章已收录到 github 仓库 liyongning/blog,欢迎 Watch 和 Star。

简介

专栏的第一篇,主要介绍专栏的目的、规划、适用人群,以及准备工作和扫盲的基础知识。

前言

最近在准备一些 Vue 系列的文章和视频,之前 Vue 的源码也读过好几遍,但是一直没写相关的文章,所以最近就计划写一写。

目标

精通 Vue 技术栈的源码原理,这是这系列的文章最终目的。

首先会从 Vue 源码解读开,会产出一系列的文章和视频,从详细刨析源码,再到 手写 Vue 1.0Vue 2.0。之后会产出周边生态相关库的源码分析和手写系列,比如:vuex、vue-router、vue-cli 等。

相信经过这一系列的认真学习,大家都可以在自己的简历上写上这么一条:精通 Vue 技术栈的源码原理

适合人群

  • 熟练使用 Vue 技术栈进行日常开发(增删改查)

  • 想深入了解框架实现原理

  • 想跳槽 或 跟老板提涨薪的同学(增删改查不值钱)

如何学习

对于系列文章,顺序学习自然最好,但如果你本身对源码有一些了解或者对某一部分特别感兴趣,也可以直接看相应对应的文章。

很多人习惯利用碎片化时间去学习,对于快餐类的文章当然没有问题,但是如果你想深入学习,还是建议坐在电脑前用整块的时间对照着文章亲自动手去学。

记住:光看不练假把式,所以在学习过程中一定要勤动手,不动笔墨不读书,像笔记、思维导图、示例代码、为源码编写注释、debug 调试等,该上就上,绝对不能偷懒。

如果你觉得该系列文章对你有帮助,欢迎大家 点赞关注,也欢迎将它分享给你身边的小伙伴。

准备

现在最新的 Vue 2 的版本号是 2.6.12,所以我就以当前版本的代码进行分析和学习。

下载 Vue 源码

  • git 命令
git clone https://github.com/vuejs/vue.git
  • github 手动下载然后解压

装包

执行 npm i 安装依赖,待装到端到端测试工具时可直接 ctrl + c 掉,不影响后续源码的研读。

source map

在 package.json -> scripts 中的 dev 命令中添加 --sourcemap,这样就可以在浏览器中调试源码时查看当前代码在源码中的位置。

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

开发调试

执行以下命令,启动开发环境:

npm run dev

看到如下效果,并在 dist 目录下生成 vue.js.map 文件,则表示成功。到这里所有的准备工作均已完成,但是不要将当前命令行 ctrl + c 掉,因为你在阅读源码时会需要向源码中添加注释,甚至改动源码,当前命令可以监测源码的改动,如果发现改动会自动进行打包;如果关闭当前命令行,你会发现,随着你注释代码的编写,在浏览器中调试源码时会出现和源码映射的偏差。所以为了更好的调试体验就别关闭它。

扫盲

执行 npm run build 命令之后会发现在 dist 目录下生成一堆特殊命名的 vue.*.js 文件,这些特殊的命名分别是什么意思呢?

构建文件分类

UMD CommonJS ES Module
Full vue.js vue.common.js vue.esm.js
Runtime-only vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
Full (production) vue.min.js vue.common.prod.js
Runtime-only (production) vue.runtime.min.js vue.runtime.common.prod.js

名词解释

  • Full:这是一个全量的包,包含编译器(compiler)和运行时(runtime)。

  • Compiler:编译器,负责将模版字符串(即你编写的类 html 语法的模版代码)编译为 JavaScript 语法的 render 函数。

  • Runtime:负责创建 Vue 实例、渲染函数、patch 虚拟 DOM 等代码,基本上除了编译器之外的代码都属于运行时代码。

  • UMD:兼容 CommonJS 和 AMD 规范,通过 CDN 引入的 vue.js 就是 UMD 规范的代码,包含编译器和运行时。

  • CommonJS:典型的应用比如 nodeJS,CommonsJS 规范的包是为了给 browserify 和 webpack 1 这样旧的打包器使用的。他们默认的入口文件为 vue.runtime.common.js

  • ES Module:现代 JavaScript 规范,ES Module 规范的包是给像 webpack 2 和 rollup 这样的现代打包器使用的。这些打包器默认使用仅包含运行时的 vue.runtime.esm.js 文件。

运行时(Runtime)+ 编译器(Compiler) vs. 只包含运行时(Runtime-only)

如果你需要动态编译模版(比如:将字符串模版传递给 template 选项,或者通过提供一个挂载元素的方式编写 html 模版),你将需要编译器,因此需要一个完整的构建包。

当你使用 vue-loader 或者 vueify 时,*.vue 文件中的模版在构建时会被编译为 JavaScript 的渲染函数。因此你不需要包含编译器的全量包,只需使用只包含运行时的包即可。

只包含运行时的包体积要比全量包的体积小 30%。因此尽量使用只包含运行时的包,如果你需要使用全量包,那么你需要进行如下配置:

webpack

module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
// ...
plugins: [
alias({
'vue': 'vue/dist/vue.esm.js'
})
]
})

Browserify

Add to your project's package.json:

{
// ...
"browser": {
"vue": "vue/dist/vue.common.js"
}
}

源码目录结构

通过目录结构的阅读,对源码有一个大致的了解,知道哪些东西需要去哪看。

├── benchmarks                  性能、基准测试
├── dist 构建打包的输出目录
├── examples 案例目录
├── flow flow 语法的类型声明
├── packages 一些额外的包,比如:负责服务端渲染的包 vue-server-renderer、配合 vue-loader 使用的的 vue-template-compiler,还有 weex 相关的
│ ├── vue-server-renderer
│ ├── vue-template-compiler
│ ├── weex-template-compiler
│ └── weex-vue-framework
├── scripts 所有的配置文件的存放位置,比如 rollup 的配置文件
├── src vue 源码目录
│ ├── compiler 编译器
│ ├── core 运行时的核心包
│ │ ├── components 全局组件,比如 keep-alive
│ │ ├── config.js 一些默认配置项
│ │ ├── global-api 全局 API,比如熟悉的:Vue.use()、Vue.component() 等
│ │ ├── instance Vue 实例相关的,比如 Vue 构造函数就在这个目录下
│ │ ├── observer 响应式原理
│ │ ├── util 工具方法
│ │ └── vdom 虚拟 DOM 相关,比如熟悉的 patch 算法就在这儿
│ ├── platforms 平台相关的编译器代码
│ │ ├── web
│ │ └── weex
│ ├── server 服务端渲染相关
├── test 测试目录
├── types TS 类型声明

链接

感谢各位的:点赞收藏评论,我们下期见。


当学习成为了习惯,知识也就变成了常识。 感谢各位的 点赞收藏评论

新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn

文章已收录到 github 仓库 liyongning/blog,欢迎 Watch 和 Star。

Vue 源码解读(1)—— 前言的更多相关文章

  1. Vue 源码解读(3)—— 响应式原理

    前言 上一篇文章 Vue 源码解读(2)-- Vue 初始化过程 详细讲解了 Vue 的初始化过程,明白了 new Vue(options) 都做了什么,其中关于 数据响应式 的实现用一句话简单的带过 ...

  2. Vue 源码解读(4)—— 异步更新

    前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对 ...

  3. Vue 源码解读(5)—— 全局 API

    目标 深入理解以下全局 API 的实现原理. Vue.use Vue.mixin Vue.component Vue.filter Vue.directive Vue.extend Vue.set V ...

  4. Vue 源码解读(6)—— 实例方法

    前言 上一篇文章 Vue 源码解读(5)-- 全局 API 详细介绍了 Vue 的各个全局 API 的实现原理,本篇文章将会详细介绍各个实例方法的实现原理. 目标 深入理解以下实例方法的实现原理. v ...

  5. Vue 源码解读(8)—— 编译器 之 解析(上)

    特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...

  6. Vue 源码解读(9)—— 编译器 之 优化

    前言 上一篇文章 Vue 源码解读(8)-- 编译器 之 解析 详细详解了编译器的第一部分,如何将 html 模版字符串编译成 AST.今天带来编译器的第二部分,优化 AST,也是大家常说的静态标记. ...

  7. Vue 源码解读(10)—— 编译器 之 生成渲染函数

    前言 这篇文章是 Vue 编译器的最后一部分,前两部分分别是:Vue 源码解读(8)-- 编译器 之 解析.Vue 源码解读(9)-- 编译器 之 优化. 从 HTML 模版字符串开始,解析所有标签以 ...

  8. Vue 源码解读(11)—— render helper

    前言 上一篇文章 Vue 源码解读(10)-- 编译器 之 生成渲染函数 最后讲到组件更新时,需要先执行编译器生成的渲染函数得到组件的 vnode. 渲染函数之所以能生成 vnode 是通过其中的 _ ...

  9. Vue 源码解读(12)—— patch

    前言 前面我们说到,当组件更新时,实例化渲染 watcher 时传递的 updateComponent 方法会被执行: const updateComponent = () => { // 执行 ...

随机推荐

  1. 阅读阿里Java开发手册记录

    概述 在阅读完阿里Java开发手册(嵩山版)后,发现自己在开发过程中有一些没有按照规范开发的情况,这里将容易忘记的规范记录下来,并且添加自己的理解,一方面方便自己巩固记忆,另一方面希望对其他同学能够提 ...

  2. js复制标题和链接

    问题 常常在写博客和作业时候,需要附上参考链接. 希望可以一键得到标题和链接. 解决方案 普通元素 可以使用findid然后复制 但是标题无法使用 <!DOCTYPE html> < ...

  3. unity3d,java,c#,python,rospy的socket通信测试

    1.C#在与其他人通信时,最好不要用tcpclient来承接其他语言,会收不到用户名,最好都用socket. 2.unity3d在与java通信时,对方返回我unity3d发的数据流会打印收到一个类, ...

  4. jQuery ajax get与post后台交互中的奥秘

    这两天在做关注功能模块(类似于Instagram).多处页面都需要通过一个"关注"按钮进行关注或者取消该好友的操作.一个页面对应的放一个按钮,进行操作.效率低维护性差.因此想通过j ...

  5. 2022GDUT寒训专题一C题

    题目 题面 马在中国象棋以日字形规则移动. 请编写一段程序,给定n×m大小的棋盘,以及马的初始位置 (x, y),要求不能重复经过棋盘上的同一个点,计算马可以有多少途径遍历棋盘上的所有点. 输入格式 ...

  6. 返回值Student-Json

    MyController中 index.jsp 修改url

  7. java匿名内部类-应用

    1 package face_09; 2 3 import sun.jvm.hotspot.ui.action.ShowAction; 4 5 interface Inter{ 6 void show ...

  8. py调用shell

    py调用shell

  9. HTTP状态码1XX深入理解

    前段时间看了<御赐小仵作>,里面有很多细节很有心.看了一些评论都是:终于在剧里能够看到真正在搞事业.发了工资第一时间还钱的正常人了.我印象比较深的是王府才能吃上的葡萄.觉得非常合理.剧里说 ...

  10. linux 环境变量配置方式

    linux 环境变量可以在多个文件中配置 说明: linux bash 运行模式分为两种: login shell 和non-login shell, 两种登录模式启动是加载的配置文件不一样. 1. ...