大前端学习 -- Vue.js源码分析(响应式、虚拟DOM、模板编译和组件化)-- 总结

Vue.js源码分析(响应式、虚拟DOM、模板编译和组件化)

文章内容输出来源:拉勾教育大前端高薪训练营


Vue.js源码剖析-响应式原理

一、准备工作

1. Vue源码的获取

  • 项目地址:https://github.com/vuejs/vue
  • Fork一份到自己仓库,克隆到本地,可以自己写注释提交到GitHub
  • 为什么分析Vue2.6
    • 到目前为止Vue3.0的正式版还没有发布
    • 新版本发布后,现有项目不会升级到3.0,2.x还有很长的一段过渡期
    • 3.0项目地址:http://github.com/vuejs/vue-next

2. 源码目录结构

src

|——compiler 编译相关

|——core Vue核心库

|——platforms 平台相关代码

|——server SSR、服务器端渲染

|——sfc .vue 文件编译为js对象

|——shared 公共的diamante

3. 了解Flow

  • 官网:https://flow.org/
  • JavaScript的静态类型检查器
  • Flow的静态类型检查错误是通过静态类型推断实现的
    • 文件开头通过 // @flow 或者 /* @flow */声明
/* @flow */
function square(n: number): number {
  return n * n
}
square("2") // Error!

4. 调试设置

(1). 打包
  • 打包工具Rollup

    • Vue.js源码的打包工具使用时Rollup,比Webpack轻量
    • Webpack把所有文件当做模块,Rollup只处理js文件,更适合在Vue.js这样的库中使用
    • Rollup打包不会生成冗余的代码
  • 安装依赖

    yarn
    
  • 设置sourcemap

    • package.json文件中的dev脚本中添加参数 --sourcemap
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"
    
  • 执行dev

    • yarn dev执行打包,用的是Rollup,-w参数是监听文件的变化,文件变化自动重新打包
    • 结果: 生成了dist目录
  • 执行build

    • yarn build生成了不同版本的Vue

二、 Vue的不同构建版本

1. Vue的不同构建版本

  • npm run build 重新打包所有文件
  • 官方文档-对不同构建版本的解释
  • dist/README.md

|| UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) | |
| :---------------------------- | :----------------- | :--------------------------- | :------------------------- | ---------------------- |
| 完整版 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| 只包含运行时版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
| 完整版 (生产环境) | vue.min.js | - | - | vue.esm.browser.min.js |
| 只包含运行时版 (生产环境) | vue.runtime.min.js | - | - | - |

2. 术语

  • 完整版:同时包含编译器和运行时的版本。
  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码,体积大,效率低。
  • 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。体积小,效率高,基本上就是除去编译器的其它一切。
  • UMD:通用的模块版本,支持多种模块方式。UMD 版本可以通过

你可能感兴趣的:(Vue,大前端,Vue源码分析)