前言

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

一、准备工作

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

1.Flow

1.1简介

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

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 = []
类和对象

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 所共享的。

Vue.js源码解析 - 2.x

前言