阅读Vue源码--前置知识

Flow

• 认识 Flow

  JavaScript 静态类型检查器，vue 源码利用 Flow 做静态类型检查

• 为什么用 Flow

  js 动态类型语言，类型检查发展趋势，在编译期尽早发现 bug，不影响代码运行，使编写 js 有强类型语言的体验

• FLow 工作方式

  • 类型推断：通过变量的使用上下文推断变量类型，更具推断来检查类型

    // Flow
    function split(str) {
      return str.split('')
    }
    
    split(11)
    // Flow检查报错，split期待的参数使字符串，而不是数字
    

  • 类型注释：事先注释好期待的类型，Flow 会基于这些注释来判断

    // Flow
    function add(x: number, y: number): number {
      return x + y
    }
    
    add('Hello', 11)
    // 类型推断不需要编写类型注释 特定场景需要类型注释提供更明确的检查
    

• Flow 在 Vue.js 源码的应用

  第三方库或自定义类型 Flow 并不认识，检查时报错，因此 FLow 提出 libdef 用来识别，在 Vue.js 主目录下有.flowconfig 文件，这里的[libs]配置的是 flow，表示指定的库定义都在 flow 文件夹内，阅读源码时，遇到某个类型可以在这里查看数据结构的定义

Vue 源码目录

src
├─compiler 编译相关
├─core Vue 核心库
├─platforms 平台相关代码
├─server SSR，服务端渲染
├─sfc .vue 文件编译为 js 对象
└─shared 公共的代码

• compiler

  包含 Vue.js 所有编译相关的代码，将模板解析为 ast 语法树，ast 语法树优化，代码生成等

  编译工作推荐在构建时做（借助 webPack、vue-loader 等辅助插件）

• core

  Vue.js 核心代码，包括内置组件、全局 API 封装、Vue 实例化、观察者、虚拟 DOM、工具函数等

• platform

  Vue.js 是跨平台的 MVVM 框架，可在 web 和 native 客户端上，platform 是 Vue.js 的入口，2 个目录代表 2 个主要入口，分别打包成运行在 web 和 weex 上的 Vue.js

• server

  服务端渲染相关逻辑，主要是泡在服务端的 node.js

• sfc

  将单文件组件解析册成 javaScript 对象

• shared

  浏览器端和服务端所共享的工具方法

Vue 源码调试设置

• 打包工具 Rollup

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

• 安装依赖

  npm i

• 设置 sourcemap

  package.json 文件中的 dev 脚本中添加参数 --sourcemap

  "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:webfull-dev"

• 执行 dev

  npm run dev 执行打包，用的是 rollup，-w（watcher） 参数是监听文件的变化，文件变化自动重新打打包，-c 设置配置文件，--environment 设置环境变量，根据环境变量打包成不同版本的 vue

  在 dist 目录中打包生成两个文件

image-20210304084053706.png

• 调试

  • examples示例中引入的 vue.min.js 改为 vue.js

  • 打开 Chrome 的调试工具中的 source

image-20210304084317757.png

Vue 的不同构建版本

• npm run build 重新打包所有文件

• 官方文档 - 对不同构建版本的解释

• dist\README.md

image-20210304084412637.png

• 不同版本

  • 完整版：同时包含编译器和运行时的版本。
  • 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码，体积大、效率低。
  • 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码，体积小、效率高。基本上就是除 去编译器的代码。
  • UMD：UMD 版本通用的模块版本，支持多种模块方式。 vue.js 默认文件就是运行时 + 编译器的 UMD 版本
  • CommonJS(cjs)：CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。
  • ES Module：从 2.6 开始 Vue 会提供两个 ES Modules (ESM) 构建文件，为现代打包工具提供的 版本
    • ESM 格式被设计为可以被静态分析，所以打包工具可以利用这一点来进行“tree-shaking”并 将用不到的代码排除出最终的包
    • ES6 模块与 CommonJS 模块的差异

• Runtime + Compiler vs. Runtime-only

  // Compiler
  // 需要编译器，把 template 转换成 render 函数
  // const vm = new Vue({
  //   el: "#app",
  //   template: "
  {{ msg }}
  ",
  //   data: {
  //     msg: "Hello Vue",
  //   },
  // });
  // Runtime
  // 不需要编译器
  const vm = new Vue({
    el: '#app',
    render(h) {
      return h('h1', this.msg)
    },
    data: {
      msg: 'Hello Vue'
    }
  })
  

  推荐使用运行时版本，因为运行时版本相比完整版体积要小大约 30%

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

  通过查看 webpack 的配置文件vue inspect > output.js

  image-20210304085010850.png

*.vue 文件中的模板是在构建时预编译的，最终打包后的结果不需要编译器，只需要运行 时版本即可