前言

本篇为学习笔记，记录在慕课vue.js源码解析教学视频中学习到的知识。

一、准备工作

  在本章节,将会介绍vue的一些前置知识， 如 flow、源码目录、构建方式、编译入口。

1.Flow

1.1简介

  js的静态类型检查工具。js-> 动态类型语言: 灵活，易有隐患代码。flow->编译期发现由类型错误引起的bug -> 使编写 JS 具有和编写 Java 等强类型语言相近的体验。

1.2工作方式

1. 类型推断
2. 类型注释

类型推断
  自动推断变量类型

function split(str) {
  return str.split(' ')
}
split(11)

  flow检查以上代码会报错， 因为number类型没有split方法。

类型注释
  根据注释来检查

function add(x: number, y: number): number {
  return x + y
}

add('Hello', 11)

  flow检查以上代码会报错， 因为指定了x是number。

P.S. 其他注释声明格式

• 数字数组 var arr:Array<number> = []
• 类和对象

class People {
    name: string;
    age: number | string;
    constructor( name: string, age: number | string){
      this.name = name
      this.age = age
  }
} 

var nadia = new People("nadia",27)

var house:{address:string, price:number,houseOwner:People} = {
   address : "河北省唐山市xxx",
   price：100,
   houseOwner： new People("nadia",27),
}

2. Vue.js源码目录设计

vue源码地址

src
├─dist                   # 项目构建后的文件
├─scripts                # 与项目构建相关的脚本和配置文件
├─flow                   # flow的类型声明文件
├─src                    # 项目源代码
│    ├─complier          # 与模板编译相关的代码
│    ├─core              # 通用的、与运行平台无关的运行时代码
│    │  ├─observe        # 实现变化侦测的代码
│    │  ├─vdom           # 实现virtual dom的代码
│    │  ├─instance       # Vue.js实例的构造函数和原型方法
│    │  ├─global-api     # 全局api的代码
│    │  └─components     # 内置组件的代码
│    ├─server            # 与服务端渲染相关的代码
│    ├─platforms         # 特定运行平台的代码，如weex
│    ├─sfc               # 单文件组件的解析代码
│    └─shared            # 项目公用的工具代码
└─test                   # 项目测试代码

2.1 compiler

Vue.js编译相关代码。包括1.模板解析成ast语法树2.ast语法树优化3.代码生成etc。

ast语法树简介可参考https://blog.csdn.net/philosophyatmath/article/details/38170131
建议离线编译， 即在构建时借助webpack，vue-loader等辅助插件编译。

2.2 core

核心代码， 包括

• 内置组件
• 全局API封装
• Vue实例化
• 观察者
• 虚拟dom
• 工具函数 ect

2.3 platform

Vue.js是一个跨平台的MVVM框架， 可以跑在web上， 也可以配合weex跑在native客户端上。
本学习笔记重点分析web入口打包后的vue.js

2.4 server

Vue.js 2.0 支持了服务端渲染，所有服务端渲染相关的逻辑都在这个目录下。注意：这部分代码是跑在服务端的 Node.js，不要和跑在浏览器端的 Vue.js 混为一谈。

服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。

2.5 sfc

解析相关代码，把vue文件内容解析为js对象

2.6 shared

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

3. Vue.js源码构建

Vue.js源码基于rollup构建，构建相关的代码在script文件夹下。

3.1 构建脚本

代码详见package.json

3.2 构建过程