读 vue 源码1

vue 源码的下载和目录

  1. 项目地址:github.com/vuejs/vue
  2. 项目中最重要的就是 src 目录中的内容
doc 复制代码
├─compiler 编译相关,把 template 转换为 render 函数
├─core Vue 核心库
  ├─components 定义了 Vue 中自带的 keep-alive 组件
  ├─global-api 定义了 Vue 中的静态方法
  ├─instance 创建 Vue 实例的位置,定义了 Vue 中的构造函数、初始化以及生命周期钩子函数
  ├─observer 响应式机制实例的位置
  ├─util 公共方法
  ├─vdom 虚拟 DOM,重写了 snabbdom,增加了组件的机制
├─platforms 平台相关代码
  ├─web 浏览器
  ├─weex 移动端
├─server SSR,服务端渲染
├─sfc single file component,将 .vue 单文件编译为 js 对象
└─shared 公共的代码

vue2 中引入了 flow 进行类型检测,自己在官网学习

vue 源码的打包和调试

1. 打包工具:Rollup

Webpack 会把所有文件当作模块处理,而 Rollup 只处理 js。 开发项目适合使用 Webpack,开发库适合使用 Rollup。

2. 安装运行

注意切换到 dev 分支然后再 npm i 下载依赖

运行命令:

js 复制代码
"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"
  • -w: watch 监视源码的变化,当源码变化时立即重新打包
  • -c: 设置配置文件,后面跟的 scripts/config.js 就是配置文件了
  • --environment: 设置环境变量,用于打包生成不同版本的 vue
  • --sourcemap: 开启代码地图

dist 目录下有很多 js 文件,这些 js 文件就是不同版本的 vue,此时并没有 .map 文件,我们先删除 dist 目录。

js 复制代码
npm run dev

会发现重新生成了 dist 目录,且目录下生成 vue.js 和 vue.js.map 文件,.map 文件记录了 src 中的源码和我们打包生成的 vue.js 之间的关系,其他版本的 vue 需要通过 npm run build 命令生成。

3. 调试:

  1. 打开 examples\grid\index.html 文件,其中引入的是 ../../dist/vue.min.js 文件,我们要改成 ../../dist/vue.js。
  2. 在浏览器访问这个 index.html,打开控制台,在 Sources 我们可以看到 dist 和 src 目录,只有开启了 sourcemap,才可以在这里看到 src 目录。
  3. 然后打开 grid.js,找到创建 Vue 的位置打上断点,就可以进入 Vue 源码进行调试啦。
  • 不同版本之间 Vue 的区别:

首先通过 npm run build 打包出不同版本的 vue

经过总结,我们可以得出命名规则: 'vue' + 'runtime'/'' + ''/'common'/'esm' + 'js'

  1. 'runtime'/'':此字段表示vue是否为运行时版本
  • 编译器:将 template 编译成为 render 渲染函数的代码,体积大、效率低。
  • 运行时版本:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码,体积小、效率高。不支持 template,我们需要使用 render 代替。名称中包含 runtime 的就是运行时版本。
  • 完整版:编译器 + 运行时版本,名称中不包含 runtime 的就是完整版本。
  1. ''/'common'/'esm':此字段表明vue文件的模块方式
  • 没有标明模块方式的文件就是 UMD 版本。
  • 标明 common 的文件使用的就是 CommonJS。
  • 标明 esm 的文件使用的就是 ES Modules,这是当前最主流的模块方式。

Vue-CLI 创建的项目默认使用的是 vue.runtime.esm.js

相关推荐
littleboyck16 分钟前
VSCode 全自动调试Vue/React项目
前端·visual studio code
洛小豆1 小时前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
我有一棵树1 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
white-persist1 小时前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
IT_陈寒2 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start2 小时前
前端基础一、HTML5
前端·html·html5
鬼谷中妖2 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A2 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER2 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父2 小时前
前端速通—CSS篇
前端·css