vue源码分析

3.0
vue3.0的代码从flow迁移到typescript上了,用typescript完全重写了。
代码重构的点:内部模块节藕;编译器重构,插件化设计
平台支持:vue3.0将会提供一个custom render API:createRender.createRender函数更好的支持开发者去用vue语法写支持多端的代码
vue hooks 大概率取代了mixins
会有一个专门的版本自动降级为用Object.defineproperty()的get、set拦截处理数据,并对一些新的ie不支持的用法做出警告
2.x
基本模块:准备工作-数据驱动-组件化-响应式原理-编译-扩展-vuerouter-vuex
一、Flow
Flow是Facebook出品的JavaScript静态类型检查工具。Vue源码利用了Flow做静态类型检查。
目的:解决编译阶段不被发现,运行阶段才能暴露的隐患bug,增强代码的可维护性和可读性
引入时机:Vue2.0重构时,已包含功能(es6语法,eslint代码风格)
选择Flow的原因:Babel和ESLint都有对应的Flow插件以支持语法,改动成本小
类型检查是当前动态语言的发展趋势,在编译期尽早发现(由类型错误引起的)bug
类型检查方式:类型推断、类型注释(Array<T>,string | number)
若想任意类型 T 可以为 null 或者 undefined,只需类似如下写成 ?T 的格式即可。

1
2
3
4
5
6
7
8
9
10
11
12
//类型推断:下面的写法编译时就会报错,不会等到方法调用时
function split(str){
return str.split('');
}
split(11);//split方法只接收string类型

//类型注释,即给参数或变量设置默认类型
function add(x:number,y:number):number{
return x+y
}
var arr:Array<number> = [1,2,3];
var b:string | number = 123;

二、源码目录结构src
compiler(编译相关):把模版解析成ast语法树,ast语法树优化,代码生成等功能。编译是一项耗性能的工作,推荐使用webpack、vue-loader在构建时编译(离线编译),不要等到运行时
core(核心代码):内置组件、全局API封装、vue实例化,观察者,虚拟dom、工具函数
platforms(各平台的支持):两个目录代表两个主要入口
server(服务器端渲染)
sfc(.vue文件解析)
shared(共享文件)