Vue.js2源码解析(长更中)认识Flow Flow官网:https://flow.org/en/docs/getti

认识Flow

Flow是facebook出品的Javascript静态类型检查工具。vue.js的源码用了Flow做了静态类型检查。

项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。所以在Vue.js3中，就用了Typescript，来做类型检测。

Flow 的工作方式(了解一下)

类型推断：通过变量的使用上下文来推断出变量类型，然后根据这些推断来检查类型。
类型注释：事先注释好我们期待的类型，Flow会基于这些注释来判断。
有时候我们想引用第三方库，或者自定义一些类型，但 Flow 并不认识，因此检查的时候会报错。为了解决这类问题，Flow 提出了一个 libdef 的概念，可以用来识别这些第三方库或者是自定义类型，而 Vue.js 也利用了这一特性。
在 Vue.js 的主目录下有 .flowconfig 文件，它是 Flow 的配置文件，感兴趣的同学可以看官方文档。这其中的 [libs] 部分用来描述包含指定库定义的目录，默认是名为 flow-typed 的目录。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

compiler

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能。编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，使用包含构建功能的 Vue.js。

core

core 目录包含了 Vue.js 的核心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、虚拟 DOM、工具函数等等。这里的代码可谓是Vue.js 的灵魂。

platform

Vue.js 是一个跨平台的 MVVM 框架，它可以跑在 web 上，也可以配合 weex 跑在 native 客户端上。platform 是 Vue.js 的入口，两个目录代表两个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。

server

Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的 Node.js，不要和跑在浏览器端的 Vue.js 混为一谈。服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

sfc

通常我们开发 Vue.js 都会借助 webpack 构建，然后通过 .vue 单文件来编写组件。这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。

shared

Vue.js 会定义一些工具方法，这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。

Vue2初始化的文件夹在哪里

在源码文件中的src/core/instance/index.js。

Vue2为什么性能比较慢

这个文件涉及到Vue里面初始化的顺序，从props->methods->data->computed->watch.我们知道Vue做的就是数据劫持。用了Object.defineProperty这个API，第一个参数，就是你要定义的对象，第二个参数，是你要定义的属性，第三个参数，是不是可以读的，是不是可以枚举的。怎么对每个对象都做到响应式的，只能是递归遍历。这样遍历出来的属性，如果层级很深的话。递归的时间就比较长，这样就比较浪费性能。

Vue2中使用的`with`

with的用法，在src/complier/codegen/index.js中。大家感兴趣的话，可以自己去看一下。这个with有什么作用？主要是将对象里面的函数属性直接插入到当前函数作用域的顶端。

AST语法树和虚拟dom和真实dom的区别

AST语法树，主要是用来转化HTML的。要生成虚拟dom之前是要生成AST语法树的。他会标记不同的节点，方便了我们在虚拟dom中的操作。虚拟dom：是通过JS来描述HTML的。这样操作起来比较节省性能比操作真实dom。真实dom：是我们在代码中写的元素。

Vue.js2源码解析(长更中)