base : https://tasaid.com/Blog/20171011233051.html

express路由

首先我们先看一下传统的express路由是如何使用的：

import * as express from 'express';
import { Response,Request } from 'express'

const app = express();

//传统的路由方式
app.get('/',(req:Request,res:Response) => {
    res.send('首页')
})

app.get('/user',(req:Request,res:Response) => {
    res.send('我的')
})

app.listen(3000,() => {
    console.log('Example app listening at http://localhost:3000')
})

我们可以看到，传统的路由就是有点像流水线一样，而且看起来并不是那么好看。上一章我们学到了装饰器和反射的相关知识，那么现在我们需要使用这些知识来改造路由，对他进行一下升级。

改造路由

基于_装饰器和反射_，我们对路由的改造的最终结果应该像下面所示：

class User {
    @httpGet
    @path('/user/login')
    login() {
        return 'user login'
    }

    @httpGet
    @path('/user/exit')
    exit() {
        return 'user logout!!!!'
    }

}

这种方式和传统的路由使用方式相比，这种基于装饰器和反射的路由有一下优势：

• 将路由抽离处理成来装饰器，整个router函数只需要处理业务逻辑即可
• 隐藏res、req，路由返回值直接return即可
• 更加优雅、配置简单明了

装饰器

这里我们需要简单实现两个装饰器：

• httpMethods：封装http请求方法，如get、post等。用于应对不同的请求方法。
• path：封装path，用于处理请求路径和请求参数

httpMethods

import 'reflect-metadata'

export const symbolHttpMethodsKey = Symbol("router:httpMethod")

function createMethods(method:string){
    return function httpMethodDecorator(target:any,targetKey:string){
        //注解：注入元数据 --> 请求方法
        Reflect.defineMetadata(symbolHttpMethodsKey,method,target,targetKey);
    }
}

export const httpGet = createMethods('get');
export const httpPost = createMethods('post');

path

import 'reflect-metadata'
import { Response,Request }  from 'express'

export const symbolPathKey = Symbol.for('router:path')

export const path = function(path:string):Function {
    return function(target:any,targetkey:string,descroptior:PropertyDescriptor){
        //注解：注入元数据 --> 请求路径
        Reflect.defineMetadata(symbolPathKey,path,target,targetkey);
        //如果不存在回调函数
        if(!descroptior.value) return 
        //保存原始回调函数
        let oldMethod = descroptior.value;
        //重写回调函数 
        descroptior.value = function(req:Request,res:Response){
            //获取请求参数
            const params = Object.assign({},req.body,req.query);
            //调用回调函数 获取返回值
            let result = oldMethod.call(this,params);
            //给浏览器发送结果
            res.send(result)
        }
    }
}

Router –> Controller

现在我们需要将原有的业务进行抽离，按照业务进行归类，处理成一个个的class，如：

class User {
    @httpGet
    @path('/user/login')
    login() {
        return 'user login'
    }

    @httpGet
    @path('/user/exit')
    exit() {
        return 'user logout!!!!'
    }

    /**
     * 属性装饰器
     * @param v1
     */
    // @httpGet
    // @path('/validate')
    // @validateEmptyStr
    // valid(@required v1: string) {
    //   console.log(v1)
    //   return v1
    // }
}

然后在程序入口文件处，将class里面的方法遍历一遍，将其挂载到app实例上：

export default (app: Router) => {
    let user = new User()
    for (let methodName in user) {
        let method = user[methodName]
        if (typeof method !== 'function') break
        // 得到注解的数据
        let httpMethod = Reflect.getMetadata(
            symbolHttpMethodsKey,
            user,
            methodName
        )
        let path = Reflect.getMetadata(symbolPathKey, user, methodName)

    // app.get('/', () => any)
    //在app实例挂载路由和对应的回调函数
        app[httpMethod](path, method)
    }
}

到这里，我们基于_装饰器和反射_的路由器改造就基本完成了。
下一步就是编译和运行了。

编译和运行

编译

这里我选用的是Gulp进行编译。

const { src,dest,watch,series } = require('gulp')
const del = require('del');
const ts = require('gulp-typescript');
const tsProject = ts.createProject("tsconfig.json");

function clean(cb){
    return del(['dist'],cb)
}

function build(){
    return watch('src/**/*.ts',{ events:'all',delay:500,ignoreInitial:false },function(){
        return src('src/**/*.ts')
        .pipe(tsProject())
        .pipe(dest("dist"))
    })
}

exports.default =  series(clean,build)

• gulp-typescript 对typescript进行处理，将ts文件处理成js文件
• 使用del在重新编译之前将上次编译的文件夹删除，类似于rm -rf。

然后我们只需要在终端执行npx gulp即可。

运行

在package.json中配置scripts，执行即可。

{
    "name": "ts-router-to-constroller",
    "version": "1.0.0",
    "license": "MIT",
    "main": "dist/app.js",
    "scripts": {
        "dev": "nodemon dist/app.js"
    },
    "dependencies": {
        "@types/express": "^4.17.6",
        "@types/node": "^14.0.1",
        "del": "^5.1.0",
        "express": "^4.17.1",
        "gulp": "^4.0.2",
        "gulp-livereload": "^4.0.2",
        "gulp-nodemon": "^2.5.0",
        "gulp-typescript": "^6.0.0-alpha.1",
        "typescript": "^3.9.2"
    }
}

源码点击这里

base: https://tasaid.com/Blog/20171011231943.html

前言

最近随着项目的不断迭代，团队协作之间出现了一个很大的问题：全局的数据属性和数据类型总是被篡改。而且，一些全局的公共方法在使用时，总需要看着API文档才能知道其定义：需要传入什么参数、返回什么参数。
而且，一旦其他同学修改了全局方法而没有来得及更新API文档，通知到每一位同学，那么就会造成其他调用的地方出现不可避免的bug。
在上述过程中涉及到以下问题：

• 接口该如何描述自身的参数及返回值
• 数据格式该如何描述
• 在迭代中，接口参数及返回值对应的API文档该如何及时更新。

紧跟上述问题，我们就好发现在JavaScript中缺少了一样很重要的东西：静态类型。
因为有静态类型我们才知道接口需要什么参数、返回什么值、返回值是什么类型、参数是否可空等等。
在vue中使用的是 ** Flow ** 。

Flow

flow is a static type checker for javascript

flow是facebook公布的JavaScript静态类型检查器，它可以检查JavaScript中的一些bug，如：数据类型隐式转换、数据类型检查等。

// @flow
let a:number = 2;
function foo(b:tring):boolean{
    return false;
}

使用babel转换之后：

let a = 2;
function foo(b){
    return false;
}

TypeScript

相比与 ** Flow ** ，TypeScript是一门语言，它是JavaScript的超集。而且， ** Flow ** 的使用是对JavaScript的一种侵入式修改，我们想要的是一种无侵入式的。
TypeScript 的定位是做静态类型语言，而 Flow 的定位是类型检查器。

那么什么是TypeScripe呢？
TypeScript 简称 TS。TypeScript 是 JavaScript 的超集，就是在 JavaScript 上做了一层封装，封装出 TypeScript 的特性，当然最终代码可以编译为 JavaScript。
随着项目工程越来越大，越来越多的前端意识到静态数据类型的重要性，随着 TypeScript 的逐渐完善，支持者越来越多，静态数据类型的需求越来越强。
JavaScript 行至今日，灵活，动态让它活跃在编程语言界一线。而灵活，动态使得它又十分神秘，只有运行才能得到答案。类型的补充填充了 JavaScript 的缺点，从 TypeScript 编译到 JavaScript，多了静态类型检查，而又保留了 JavaScript 的灵活动态。

简单来说：动态代码一时爽，重构全家火葬场。

静态类型

这里给出一下静态类型检查和类型推导的例子：

let isDone: boolean = true
let myName: string = 'kaka'
let decLiteral: number = 10
let hexLiteral: number = 0x1000

function foo(): void {
    console.log('我没有返回值!')
}

//声明一个void类型 只能将它只为undefined null
const unusable: void = undefined
//没有类型声明 ts会进行类型推导
const myAge = 25
//等价于
const myAge2: number = 25

//联合类型
function bar(somethine: string | object): string {
    return somethine.toString()
}

//interface 定义接口
interface Person {
    name: string
    age?: number
    readonly idCard: string
    [propName: string]: any //任意属性
}

let kaka: Person = {
    name: 'kaka',
    idCard: '1234565',
    age: 25,
    firstName: 'yang',
}

//枚举
enum Days {
    Sun,
    Mon,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat,
}

console.log(Days[0]);
console.log(Days['Sun']);

enum Days2 {
    Sun = 2,
    Mon = 5,
    Tue,
    Wed,
    Thu,
    Fri,
    Sat, 
} 
console.log(Days2['Sun']);
console.log(Days2['Mon']);
console.log(Days2['Tue']);

数组

let array : number[] = [1,2,3];
let array2 :Array<number> = [1,2,3,4];

//使用接口
interface Student {
    name:string,
    age:number
}

let student:Array<Student> = [
    {
        name:'kaka',
        age:0
    }
]

//可索引类型
interface Tree {
    [index:number]:string
}

let tree:Tree;

tree = ['1','2']

类

public 修饰的方法或属性是公有的 可以被任意访问 类的属性或方法默认为public
private 只能被父类自己访问 不能在声明它的类外部使用
protected 只能被父类和子类访问
static 只能使用类名进行访问

//抽象类 子类必须实现抽象类中的抽象方法
abstract class Person {
    public name:string = 'kaka';
    private weight:number = 25;
    protected sex:string = '男';

    abstract makeSound():void;

    move(distance:number):void {
        console.log(this.name + '已经前进了：' + distance + '步')
    }
}

class Boy extends Person {
    constructor(name,weight,sex){
        super();
        this.name = name;
        // this.weight = weight
        this.sex = sex
    }

    makeSound(){
        console.log('makeSound')
    }

}

let tom = new Boy('tom',100,25);

tom.makeSound();

tom.move(100)



abstract class Animal {
    eat(food:string):void {
        console.log('eat:' + food)
    }
    abstract sleep():void
}


class Dog extends Animal {
    public name:string;

    constructor(name:string){
        super();
        this.name = name
    }

    run(){}

    sleep(){
        console.log('Dog sleep')
    }

    private pri(){}

    protected pro(){}

    readonly legs:number = 4

    static food:string = 'bones'

}

let dog = new Dog('wangcai');

// dog.pri()

// dog.pro()

// console.log(dog.food)

console.log(Dog.food)

dog.eat('🍌')


class WorkFlow {
    step1(){
        console.log('🍌调用类step1')
        return this
    }

    step2(){
        console.log('🍎调用类step2')
        return this
    }
}

class MyFlow extends WorkFlow {
    next(){
        return this
    }
}

let myFlow = new MyFlow()

myFlow.next().step1().next().step2().step1().step2() 

接口

interface IPriceData {
    /** id */
    id: number
    /** 市场价格 */
    m: string
    /** 折扣价 */
    op: string
}


type IPriceDataArray = IPriceData[];

function getData(){
     // Promise的泛型参数使用了IPriceDataArray类型，then里面返回的数据就是IPriceDataArray类型
    return new Promise<IPriceDataArray>((resolve,reject) => {
        // fetch('https://xxxxxxx/prices/pgets?ids=P_100012&area=&source=', data => {
            // console.log(data)
            resolve([
                {
                    id:10,
                    m:'kaka',
                    op:'kaka'
                }
            ])
        // })
    })
}

getData().then(data => {
    console.log(data)
});



//高级实现

interface clockconstructor {
    new (hour:number,minute:number): Clockinstance
}

interface Clockinstance {
    tick()
}

function createClock (
    ctor: clockconstructor,
    hour: number,
    minute: number
): Clockinstance{
    return new ctor(hour,minute)
}

class DigitalClock implements Clockinstance {
    constructor(h:number,m:number) {

    }
    tick(){
        console.log("beep beep");
    }
}

class AnalogClock implements Clockinstance {
    constructor(h: number, m: number) {}
    tick() {
        console.log("tick tock");
    }
}

let digitalClock = new DigitalClock(24,59);
let analogClock = new AnalogClock(23,59);

digitalClock.tick()

接口和Type：

• 相同点
  • 都可描述一个对象或者函数
  • 都可以扩展
• 不同点
  • interface
    • interface 可以进行声明合并，而type不行
  • type
    • type 可以声明基本类型别名、联合类型、元组等
    • type 可以通过 typeof 获取实例类型进行赋值

//1
interface User {
    name:string,
    age:number
}

// type User = {
//     name:string,
//     age:number
// }

// interface SetUser {
//     (name:string,age:number): void
// }

type SetUser = {
    (name:string,age:number):void
}

const fn:SetUser = function(name:string,age:number){
    console.log(name,age)
}

fn('kaka',25)


//2
interface Sex {
    sex:string
}

interface BSex extends Sex {
    age:number
}

// type Sex = {
//     sex:string
// }

// type BSex = Sex & {
//     age:number
// }


//复杂的转化
// type FName = {
//   name: string;
// };
// interface FUser extends FName {
//   age: number;
// }
interface FName {
  name: string;
}
type FUser = FName & {
  age: number;
};


//不同点

//interface 能够声明合并
interface User {
  name: string
  age: number
}

interface User {
  sex: string
}

/*
User 接口为 {
  name: string
  age: number
  sex: string 
}
*/

//type 可以声明基本类型别名，联合类型，元组等类型

type UName = {
    name:string
}

type USex = {
    sex:string
}

type Boy = UName | USex;

const boy: Boy = {
    name:'l',
    sex:'girl'
}

interface Dog {
    wong();
}
interface Cat {
    miao();
}
type Pert = Dog | Cat;

type PertList = [Dog,Cat]

断言

function add(something: string | number): void {
    // 可以使用类型断言，将 something 断言成 string
    if ((<string>something).length) {
        console.log((<string>something).length)
    } else {
        console.log(something.toString().length)
    }
}

//使用as 进行推断
function sum(something: string | number): void {
    if ((something as string).length) {
        console.log((something as string).length)
    } else {
        console.log(something.toString().length)
    }
}

add('12')
sum(12)

//如果联合属性太复杂 可以给类型起个别名
// 使用 type 创建类型别名,类型别名常用于联合类型

type Name = string
type NameResolver = () => string
type NameOrAge = Name | NameResolver

function getName(name: NameOrAge): string {
    if (typeof name === 'string') {
        return name
    } else {
        return name()
    }
}

泛型

泛型就是解决类、接口、方法的复用性、以及对不确定数据类型的支持

//泛型约束
interface LengthWise {
    length:number
}

function getLength<T extends LengthWise> (arg:T):T{
    console.log("获取泛型T：",arg.length)
    return arg
}

getLength({
    length:100,
    name:'k'
})

function identity<T>(arg:T): T{
    return arg
}

let func = identity<string>('123')


//泛型类

class Girl<T> {
    public x:T;
    public y:T;
    addSum: (x:T,y:T) => T;
    // constructor(x,y){
    //     this.x = x;
    //     this.y = y
    // }
}

let girl = new Girl<number>();

girl.x = 1;
girl.y = 12;

console.log(girl.x)
console.log(girl.y)

girl.addSum = function(x:number,y:number): number{
    return x + y
}


//泛型约束中使用类型参数
function getProperty(obj:T,key:K){
    return obj[key]
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a"); // okay
getProperty(x, "m"); // error: Argument of type 'm' isn't assignable to 'a' | 'b' | 'c' | 'd'.


// 函数重载
function getString(value:string):string {
    return value
}

function getData<T>(value:T): T {
    return value
}


getData<number>(12)
getData<string>('12')


//泛型接口

interface Teacher<T> {
    (name:T) : T
}

let MrsMa:Teacher<number> = function(x:number){
    return x
}

MrsMa(12)


interface Teacher {
    <T>(name:T) : T
}
let MrsMa:Teacher = function<T>(value:T):T {
    return value
}

MrsMa<number>(12)

装饰器

顾名思义，”装饰器” (也叫 “注解”)就是对一个 类/方法/属性/参数 的装饰。
它是对这一系列代码的增强，并且通过自身描述了被装饰的代码可能存在的行为改变。
简单来说，装饰器就是对代码的描述

/**
 * 顾名思义，"装饰器" (也叫 "注解")就是对一个 类/方法/属性/参数 的装饰。
 * 它是对这一系列代码的增强，并且通过自身描述了被装饰的代码可能存在的行为改变。
 * 简单来说，装饰器就是对代码的描述
 *
 */
import 'reflect-metadata';

var validate = function(){
    return function (
        target: any,
        targetKey: string,
        descriptor: PropertyDescriptor
    ) {
        console.log(target, targetKey, descriptor);
        //保存原来的方法
        let method = descriptor.value;
        //重写原有的方法
        descriptor.value = function(newValue:string){
            // 检查是否是空字符串
            if (!newValue) {
                throw Error('name is invalid')
            } else {
                // 否则调用原来的方法
                method.call(this, newValue)
            }
        }

    }
}

class User {
    name: string
    id: number
    constructor(name: string, id: number) {
        this.name = name
        this.id = id
    }

    // 调用装饰器
    @validate()
    changeName(newName: string) {
        this.name = newName
    }
}


let user = new User('kaka', 25)

user.changeName('');

console.log(user.name)

//类装饰器 重写类的构造函数

const A  = function(){
    return function(constructor){
        console.log(constructor);
        return class extends constructor {
            name = 'hudie'
        }
    }
}
@A()
class B {
    public name:string;
    constructor(name:string){
        this.name = name
    }
}

let b = new B('kaka');

console.log(b.name)


//方法装饰器
/**
 * target:对于类的静态成员，指的是类的构造函数。对于类的实例成员，指的是类的原型对象
 * targetKey：成员的名称
 * descriptor：成员的属性描述符。
 *  {value: any, writable: boolean, enumerable: boolean, configurable: boolean}
 */
function C(){
    return function (target:any,targetKey:string,descriptor:PropertyDescriptor){
        console.log('🍎：',target)
        console.log('🍎：',targetKey)
        console.log('🍎：',descriptor)
    }
}

class D {
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    @C()
    getName(){
        return this.name
    }

    @C()
    static getAge(){
        return 10
    }
}

let d = new D('kaka');

console.log(d.getName())

D.getAge()


//访问器修饰符  同方法修饰器 只是用于访问器上
//不同点就是修饰符使用的是 访问器修饰符 
//{get: function, set: function, enumerable: boolean, configurable: boolean}
function E(){
    return function(target:any,targetKey:string,descriptor:PropertyDescriptor){
        console.log('🍎：',target)
        console.log('🍎：',targetKey)
        console.log('🍎：',descriptor)
    }
}

class F {
    private _name: string = 'kaka';
    // 装饰在访问器上
    @E()
    get name () {
        return this._name
    }
}

let f = new F();

console.log(f.name)


/**
 * 属性修饰器
 * 在运行时会被当作函数使用 传入两个参数
 *  target: 对于静态成员来说 是类的构造函数  对于实例成员来说 是类的原型对象
 *  targetKey: 成员名称
*/

function G(){
    return function(target:any,targetKey:string){
        console.log('🍎：',target)
        console.log('🍎：',targetKey)
    }
}

class H {
    //实例成员 --> 类的原型对象
    @G()
    public name:string;
    //静态属性 --> 类的构造函数
    @G()
    static money:number = 1000;

    constructor(name:string){
        this.name = name
    }
}

let h = new H('kaka');

console.log(h.name)


/**
 * 参数修饰器
 * 参数装饰器表达式会在运行时当作函数被调用，传入下列 3个参数：
 *  - target ： 对于静态成员来说 指的是类的构造函数。 对于实例成员来说 指的是类的原型对象
 *  - targetKey : 成员名称
 *  - parameterIndex : 参数在函数参数中的索引
*/

function I(){
    return function(target:any,targetKey:string,parameterIndex:number){
        console.log('🍎：',target)
        console.log('🍎：',targetKey)
        console.log('🍎：',parameterIndex)
    }
}

class J {
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    setName(value:string, @I() key:string){
        this.name = value;
    }
}

let j = new J('kaka');


//

import 'reflect-metadata';

const requiredKey = Symbol.for("required:key");

//定制一个参数装饰器
var required = function(){
    console.log('参数装饰器1')
    return function(target:any,targetKey:string,index:number){
        console.log('参数装饰器2')
        const rules = Reflect.getMetadata(requiredKey,target) || [];
        rules.push(index);
        // console.log(rules,'---')
        Reflect.defineMetadata(requiredKey,rules,target)
    }
}

var validateEmptyStr = function(){
    console.log('方法装饰器1')
    return function(target:any,targetKey:string,descriptor:PropertyDescriptor){
        let methods = descriptor.value;
        console.log('方法装饰器2')
        let rules = Reflect.getMetadata(requiredKey,target)
        // console.log(rules)
        descriptor.value = function (){
            let args = arguments;
            // console.log(args,'args')
            let rules = Reflect.getMetadata(requiredKey,target) as Array<number>;
            if(rules && rules.length){
                rules.forEach(key => {
                    if(!args[key]){
                       throw Error(`arguments${key} is invalid`)
                    }
                })
            }
            return methods.apply(this,arguments)
        }
    }
}

class User {
    name:string;
    id:number;

    constructor(name:string,id:number){
        this.name = name;
        this.id = id;
    }
    @validateEmptyStr()
    setName(@required() value){
        this.name = value
    }
}

let u = new User('kaka',25);
u.setName('hudie')


/**
 * 元数据反射
 * 反射就是在运行时动态获取一个对象的一切信息：属性、方法等。其特点在于动态类型反推导。
 * 在Typescript中就是在设计阶段对对象注入元数据，在运行阶段读取注入的元数据。
*/

function meta(){
    return function(target:any,targetKey:string,descriptor:PropertyDescriptor){
        //获取成员类型
        let type = Reflect.getMetadata('design:type',target,targetKey);
        console.log(type)//[Function: Function]
        //获取参数类型
        let paramsType = Reflect.getMetadata('design:paramtypes',target,targetKey);
        console.log(paramsType)//[ [Function: String] ]
        //获取返回值类型
        let returnType = Reflect.getMetadata('design:returntype',target,targetKey);
        console.log(returnType)//[Function: String]
        //获取所以元数据的key（有TypeScript注入）
        let keys = Reflect.getMetadataKeys(target,targetKey);
        console.log(keys)//[ 'design:returntype', 'design:paramtypes', 'design:type' ]
    }
}

class User {
    @meta()
    say (myName: string): string {
        return `hello, ${myName}`
    }

}

引入和编译

快速使用

//安装
yarn add typescript 
//编译
tsc index.ts

我们还可以使用ts-node进行快速运行：

//安装
yarn add ts-node -g
//执行
ts-node index.ts

tsconfig.json

tsconfig.json 是 TypeScript 的编译选项文件，通过配置它来定制 TypeScript 的编译细节。

• 直接调用 tsc，编译器会从当前目录开始去查找 tsconfig.json 文件，逐级向上搜索父目录。
• 调用 tsc -p，可以指定一个包含 tsconfig.json文件的目录进行编译。如果没有找到 tsconfig.json 文件，TypeScript 会编译每个文件并在对应文件的同级目录产出。

如果你要编译的是一个 Node 项目，请先安装 Node 编译依赖： npm i @types/node --save-dev，否则会出现 Node 内置模块无法找到的情况。

一个tsconfig.json的描述文件：

{
  // 编译选项
  "compilerOptions": {
    // 输出目录
    "outDir": "./output",
    // 是否包含可以用于 debug 的 sourceMap
    "sourceMap": true,
    // 以严格模式解析
    "strict": true,
    // 采用的模块系统
    "module": "esnext",
    // 如何处理模块
    "moduleResolution": "node",
    // 编译输出目标 ES 版本
    "target": "es5",
    // 允许从没有设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 将每个文件作为单独的模块
    "isolatedModules": false,
    // 启用装饰器
    "experimentalDecorators": true,
    // 启用设计类型元数据（用于反射）
    "emitDecoratorMetadata": true,
    // 在表达式和声明上有隐含的any类型时报错
    "noImplicitAny": false,
    // 不是函数的所有返回路径都有返回值时报错。
    "noImplicitReturns": true,
    // 从 tslib 导入外部帮助库: 比如__extends，__rest等
    "importHelpers": true,
    // 编译过程中打印文件名
    "listFiles": true,
    // 移除注释
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    // 允许编译javascript文件
    "allowJs": true,
    // 解析非相对模块名的基准目录
    "baseUrl": "./",
    // 指定特殊模块的路径
    "paths": {
      "jquery": [
        "node_modules/jquery/dist/jquery"
      ]
    },
    // typescript 语法检测支持的版本库，注意不是 polyfill！只是为了有对应版本的代码特性提示！
    "lib": [
      "es2015",
      "es2015.promise"
    ]
  }
}

完整 tsconfig 配置选项的可以参考 这里，或者 tsconfig 的 json-schema。

注意： TypeScript 不会做 Polyfill，例如从 es6 编译到 es5，TypeScript 编译后不会处理 es6 的那些新增的对象的方法，如果需要 polyfill 需要自行处理！
完整的编译选项请参阅 TypeScript 中文网 和 TypeScript 官网。

编译

关于编译，个人比较倾向于使用Gulp。这里给出我的个人配置。
gulpfile.js:

const { src,dest,watch,series,task } = require('gulp')
const del = require('del');
const ts = require('gulp-typescript');
const tsProject = ts.createProject("tsconfig.json");

function clean(cb){
    return del(['dist'],cb)
}

function build(){
    return watch('src/**/*.ts',{ events:'all',delay:500,ignoreInitial:false },function(){
        return src('src/**/*.ts')
        .pipe(tsProject())
        .pipe(dest("dist"))
    })
}


exports.default =  series(clean,build)

执行npx gulp即可将src下的ts文件编译到dist目录下。

Vue同构

本文Demo取自笔者个人博客，主要是对笔者博客系统的重构，记录心得。

什么是同构？

SPA

single page application，单页面应用。当用户第一次访问网页时，服务器会下发一个html文件，当用户再次刷新或者进行页面间跳转的时候，并不会再次请求html，而是通过刷新清除，动态切换到其他页面组件。
原理：vue-router底层会对路由变化进行监听，无论你使用的是hash模式，还是history模式：

vue-router源码:src/history/hash.js

window.addEventListener(
      supportsPushState ? 'popstate' : 'hashchange',
      () => {
        const current = this.current
        if (!ensureSlash()) {
          return
        }
        this.transitionTo(getHash(), (route) => {
          if (supportsScroll) {
            handleScroll(this.router, route, current, true)
          }
          if (!supportsPushState) {
            replaceHash(route.fullPath)
          }
        })
      }
    )

在html5推出之前，vue只支持hash模式，只能通过通过onhashchange事件来监听url的变化，从而作出响应。所以我们常见的URL是这种：https://xxx.com/#/
在html5推出之后，新增的pushState、replaceState、popstate三个API让vue彻底告别上述那种难看的URL。
下面我们来看一下这三个API在Vue的使用：

vue-router源码：src/history/html5.js

window.addEventListener('popstate', e => {
      const current = this.current
      const location = getLocation(this.base)
      if (this.current === START && location === initLocation) {
        return
      }

      this.transitionTo(location, route => {
        if (supportsScroll) {
          handleScroll(router, route, current, true)
        }
      })
 })

首先，window会监听popstate事件，在回调中获取location，然后执行transitionTo函数，我们去找transitionTo函数，可是在该文件中没有直接声明transitionTo函数，但是HTML5History却是继承了 类Hisotry，所以接下来就要在History类中寻找transitionTo函数：

vue-router源码：src/history/base.js

transitionTo (
    location: RawLocation,
    onComplete?: Function,
    onAbort?: Function
  ) {
    const route = this.router.match(location, this.current)
    this.confirmTransition(
      route,
      () => {
        //更新route
        this.updateRoute(route)
        //执行回调
        onComplete && onComplete(route)
        this.ensureURL()

        // fire ready cbs once
        if (!this.ready) {
          this.ready = true
          this.readyCbs.forEach(cb => {
            cb(route)
          })
        }
      },
      err => {
        if (onAbort) {
          onAbort(err)
        }
        if (err && !this.ready) {
          this.ready = true
          this.readyErrorCbs.forEach(cb => {
            cb(err)
          })
        }
      }
    )
  }

在上述源码中我们可以清楚的看到，transitionTo函数会首先获取匹配的路由const route = this.router.match(location, this.current)，然后将route传入confirmTransition函数，执行confirmTransition函数。
在这个函数中，程序会首先判断当前路由是否和route是完全相同的，如果完全相同，那么就会取消路由更新，不做任何处理

if (isSameRoute(route, current) && route.matched.length === current.matched.length) {
  this.ensureURL()
  return abort(new NavigationDuplicated(route))
}

然后回到transitionTo函数，当执行回调的时候，首先会执行updateRoute函数

updateRoute (route: Route) {
    const prev = this.current
    this.current = route
    this.cb && this.cb(route)
    this.router.afterHooks.forEach(hook => {
      hook && hook(route, prev)
    })
  }

hook:

hook(route, current, (to: any) => {
  if (to === false || isError(to)) {
    // next(false) -> abort navigation, ensure current URL
    this.ensureURL(true)
    abort(to)
  } else if (
    typeof to === 'string' ||
    (typeof to === 'object' &&
     (typeof to.path === 'string' || typeof to.name === 'string'))
  ) {
    // next('/') or next({ path: '/' }) -> redirect
    abort()
    if (typeof to === 'object' && to.replace) {
      this.replace(to)
    } else {
      this.push(to)
    }
  } else {
    // confirm transition and pass on the value
    next(to)
  }
})

在该函数中，会对route和当前路由进行一系列的判断操作，在满足一定条件下，会执行this.replace()、 this.push()函数。

那么让我们接着去寻找这几个函数的实现：

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      pushState(cleanPath(this.base + route.fullPath))
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }

  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      replaceState(cleanPath(this.base + route.fullPath))
      handleScroll(this.router, route, fromRoute, false)
      onComplete && onComplete(route)
    }, onAbort)
  }

  ensureURL (push?: boolean) {
    if (getLocation(this.base) !== this.current.fullPath) {
      const current = cleanPath(this.base + this.current.fullPath)
      push ? pushState(current) : replaceState(current)
    }
  }

vue-router：src/history/push-state.js

export function pushState (url?: string, replace?: boolean) {
  saveScrollPosition()
  // try...catch the pushState call to get around Safari
  // DOM Exception 18 where it limits to 100 pushState calls
  const history = window.history
  try {
    if (replace) {
      // preserve existing history state as it could be overriden by the user
      const stateCopy = extend({}, history.state)
      stateCopy.key = getStateKey()
      history.replaceState(stateCopy, '', url)
    } else {
      history.pushState({ key: setStateKey(genStateKey()) }, '', url)
    }
  } catch (e) {
    window.location[replace ? 'replace' : 'assign'](url)
  }
}

export function replaceState (url?: string) {
  pushState(url, true)
}

从代码中我们可以看到，其实无论是pushstate还是replacestate，其内部实现都是基于history的，都是通过history.pushState()或者history.replaceState()实现的。

综上，我们已将URL变化到Vue-router路由变化的过程理一遍，这也是vue-router的实现原理。

回到SPA的话题

SPA的页面跳转是通过vue-router监测路由变化，使用js渲染完成的。
优点：渲染快、无须向服务器请求html，减轻服务器压力
缺点：首屏加载慢、SEO差
优化方案：使用预渲染(prerender-spa-plugin)、骨架屏（vue-skeleton-webpack-plugin、vue-server-renderer）

MPA

multi page application 多页面应用。
每一次页面跳转的时候，后台服务器都会返回一个新的html文档，这种类型的网站也就是多页网站，也叫多页应用。
优点：SEO友好
缺点：每次跳转都需要向服务器请求html、服务器压力增大

小结：

	SPA	MPA
应用构成	单个HTML和各个组件组成	多个HTML页面组成
跳转方式	动态切换页面组件	一个HTML跳到另一个HTML
资源加载	切页无需加载公共资源	切页需要重新加载公共资源
URL	http://xxx/shell.html#page1	http://xxx/page2.html
能否实现动画	可以	不可以
页面传参	页面传递数据容易（Vuex或Vue中的父子组件通讯props对象）	依赖URL、cookie或者localstorage，实现麻烦
SEO	需要单独的方案做处理	无需单独处理
使用范围	对体验要求高，特别是移动应用	需要对搜索引擎友好的网站
用户体验	页面片段间切换快，用户体验好，包括移动设备	页面间切换加载慢，不流畅，用户体验差，尤其在移动端

纵观SPA和MPA，各有千秋，如何在其中作出选择，着实让人为难。如果可以综合两者的优点就好了。

千呼万唤始出来 犹抱琵琶半遮面

同构应用（SSR + CSR）

终极大招来了，你准备好了吗？
Vue同构 ，综合SPA和MPA的优点，实现刷新SSR、切页CSR。
SSR：server side render
CSR：client side render

实现

这里先放上Vue SSR官方链接。

对SPA的改造

修改入口文件

在浏览器端渲染中，入口文件是main.js，而到了服务器端渲染，除了基础的main.js，还需要配置entry-client.js（客户端入口文件）和entry-server.js（服务端入口文件）。
mian.js

import Vue from "vue";
import App from "./App";
//引入router构造函数
import { createRouter } from "./router";
//引入store构造函数
import { createStore } from "./store";
// import "./assets/css/reset.css"; 去除全局样式 使用cnd 或则 在app.vue中引入
import "./utils/extend";

Vue.config.productionTip = false;

//去除传统Vue实例化方案
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

export function createApp() {
    const router = createRouter();
    const store = createStore();
    const app = new Vue({
        router,
        store,
        render: h => h(App)
    });
    return { app, router, store };
}

在main.js中，我们使用createApp()，返回一个Vue的实例，取消传统的Vue实例化方案。主要是因为对应SSR应用，程序运行咋服务端，每个请求应该都是全新的、独立的应用程序实例，以便不会有交叉请求造成的状态污染 (cross-request state pollution)。

新增entry-client.js

import { createApp } from './main.js'

const { app,router,store } = createApp();

router.onReady(() => {
    app.$mount('#app')
})

新增entry-server.js

import { createApp } from './main';

export default context => {
    return new Promise((resolve,reject) => {
        const { app,router,store } = createApp();
        router.push(context.url);
        router.onReady(() => {
            const matchedComponents = router.getMatchedComponents();
            if(!matchedComponents){
                return reject({code:404})
            }
            return Promise.all(matchedComponents.map(component => {
                if(component.asyncData && typeof component.asyncData == 'function'){
                    return component.asyncData({
                        store
                    })
                }
            })).then(() => {
                context.state = store.state;
                resolve(app)
            }).catch(reject)
        },reject)
    })
}

router.js

给每个请求一个新的路由router实例

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export function createRouter() {
    return new Router({
        mode: "history",
        scrollBehavior(to, from, savedPosition) {
            if (savedPosition) {
                return savedPosition;
            } else {
                return {
                    x: 0,
                    y: 0
                };
            }
        },
        routes: [
            {
                path: "/",
                name: "index",
                component: () => import('../views/index.vue'),
                meta: { keepAlive: true }
            },
            {
                path: "/detail/:id",
                name: "detail",
                component: () => import('../views/articleDetail.vue'),
                meta: { keepAlive: false }
            }
        ]
    });
}

store.js

给每个请求一个新的store实例

import Vue from "vue";
import Vuex from "vuex";
import { post } from "../http";

Vue.use(Vuex);

function fetchData() {
    return new Promise((resolve, reject) => {
        // resolve(['bar ajax 返回数据']);
        post("/findBlogInfo", {}).then(res => {
            if (res.data.code == 200) {
                resolve(res.data.data);
            }
        });
    });
}


const isClient = (typeof window !== 'undefined') ? true : false
//如果window.__INITIAL_STATE__ 存在 即将window.__INITIAL_STATE__复制给state
const state = isClient ? (window.__INITIAL_STATE__ || {}) : {
    list: [],
    detail:{}
}
const actions = {
    getData({ commit }, payload) {
        return fetchData().then(res => {
            commit("setData", { res });
        });
    }
}
const mutations = {
    setData(state, { res }) {
        // state.list = res;
        Vue.set(state, 'list', res);
    }
}

export function createStore() {
    return new Vuex.Store({
        state,
        actions,
        mutations
    });
}

使用asyncData获取异步数据

index.vue

 asyncData({ store }) {
   return store.dispatch("getData");
 },
  computed: {
    articleList() {
      return this.$store.state.list;
    }
  },

server.js

const Koa = require("koa");
const fs = require("fs");
const serverStatic = require('koa-static');
const path = require("path");
const { createBundleRenderer, createRenderer } = require("vue-server-renderer");

const app = new Koa();
app.use(serverStatic(path.join(__dirname)+'/dist/'))
const resolve = file => path.resolve(__dirname, file);

// 生成服务端渲染函数
const renderer = createBundleRenderer(
    require("./dist/vue-ssr-server-bundle.json"),
    {
        // 模板html文件
        template: fs.readFileSync(resolve("./index.html"), "utf-8"),
        // client manifest
        clientManifest: require("./dist/vue-ssr-client-manifest.json")
    }
);

function renderToString(context) {
    return new Promise((resolve, reject) => {
        renderer.renderToString(context, (err, html) => {
            err ? reject(err) : resolve(html);
        });
    });
}

app.use(async (ctx, next) => {
    try {
        const context = {
            title: "服务端渲染测试",
            url: ctx.req.url 
        };
        ctx.status = 200
        // console.log("请求过来了:",ctx.req.url);
        const render = await renderToString(context);
        ctx.body = render;
    } catch (e) {
        console.log(e,'error');
        // 如果没找到，放过请求，继续运行后面的中间件
        next();
    }
});

app.listen(3001, () => {
    console.log("server is running at http://localhost:3001");
});

修改index.html

修改模版文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum=1.0,user-scalable=0">
    <meta name="description" content="个人博客" />
    <meta name="keywords" content="前端、个人博客、CSS、JAVASCRIPT、MYSQL" />
    <link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/marked/0.8.2/marked.js"></script>

    <title>{{ title }}</title>
</head>

<body>
    <!--vue-ssr-outlet-->
</body>

</html>

其中最主要的就是<!--vue-ssr-outlet-->，原因后面会讲到。

修改webpack配置

webpack.base.conf.js
修改入口文件

entry: {
    //app:'./src/main.js'
    app: './src/entry-client.js'
}

webpack.prod.conf.js
服务端渲染不需要html-webpack-plugin，引入vue-server-renderer/client-plugin，生成vue-ssr-client-manifest.json，为服务器下发html时静态注入资源文件

const VueSSRClientPlugin = require("vue-server-renderer/client-plugin");
module.exports = {
    plugins: [
         // new HtmlWebpackPlugin({
    //   filename: process.env.NODE_ENV === 'testing'
    //     ? 'index.html'
    //     : config.build.index,
    //   template: 'index.html',
    //   inject: true,
    //   minify: {
    //     removeComments: true,
    //     collapseWhitespace: true,
    //     removeAttributeQuotes: true
    //     // more options:
    //     // https://github.com/kangax/html-minifier#options-quick-reference
    //   },
    //   // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    //   chunksSortMode: 'dependency'
    // }),
        new VueSSRClientPlugin()
    ]
}

新增webpack.server.js

处理服务端打包

const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.conf.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
const path = require('path');

module.exports = merge(baseConfig, {
  // 将 entry 指向应用程序的 server entry 文件
  entry: path.join(__dirname,'..','src/entry-server.js'),

  // 这允许 webpack 以 Node 适用方式(Node-appropriate fashion)处理动态导入(dynamic import)，
  // 并且还会在编译 Vue 组件时，
  // 告知 `vue-loader` 输送面向服务器代码(server-oriented code)。
  target: 'node',

  // 对 bundle renderer 提供 source map 支持
  devtool: 'source-map',

  // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports)
  output: {
    libraryTarget: 'commonjs2'
  },

  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // 外置化应用程序依赖模块。可以使服务器构建速度更快，
  // 并生成较小的 bundle 文件。
  externals: nodeExternals({
    // 不要外置化 webpack 需要处理的依赖模块。
    // 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
    // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
    whitelist: /\.css$/
  }),

  // 这是将服务器的整个输出
  // 构建为单个 JSON 文件的插件。
  // 默认文件名为 `vue-ssr-server-bundle.json`
  plugins: [
    new VueSSRServerPlugin()
  ]
})

修改package.json

"scripts": {
    "client:prod": "scripty",
    "server:prod": "scripty",
    "build": "rm -rf dist && npm run client:prod && npm run server:prod",
    "server": "nodemon server.js "
  },

借用插件scripty优化script命令：根目录下新建script文件夹、新建子目录client、server对应客户端打包命令和服务端打包命令

client / prod.sh: node build/build.js
server / prod.sh: cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js

本地打包测试

npm run build

npm run server

然后我们直接查看网页源码：

如果结果如上图所示，即证明我们的服务端渲染已经完成了。
切换页面，查看network，如果没有重新请求html，即证明已经实现切页CSR。

pm2 进程守护

因为我们的程序是运行在服务端的，为避免程序突然down掉，我们需要使用pm2进行进程守护。具体使用请参考pm2官方文档。

服务器部署

将我们打包好的dist文件夹、package.json、index.html、server.js上传到我们的服务器。然后执行一下命令：

npm install

npm  run server 

配置nginx

使用nginx进行代理，实现外网访问。
nginx路径：/usr/local/nginx
配置nginx.conf

server {
    listen 80;
  server_name : xxx;//你的服务器域名 ip
  location / {
      proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    proxy_set_header   Host   $host;
    proxy_pass  http://127.0.0.1:3001/;//对应上面server.js运行的端口
    proxy_redirect     off;
    proxy_set_header X-Nginx-Proxy true;
  }
}

优化方向

容灾

已知我们的程序运行在node中，那么我们就要做好容灾的准备，避免大流量的涌入导致node程序崩溃。
用户访问量增大，就会导致服务器压力增大，这时候我们就需要考虑降级处理，让部分用户的流量导向CSR，不再进行服务端渲染，避免服务器压力持续增大。 这一点可能需要nginx的配置。

热更新

做前端的我们都清楚，前端程序更新速度是很快的，有可能每一个月都会更新一次，而node运行在服务端的程序是不会那么频繁的更新的，如何处理node端程序和前端代码分开更新，这也是一个要优化的点。

以上两点，笔者因时间问题，暂未进行实践，后期会持续实践更新。

整体架构分析

首先我们先分析一下这张图：在vue中每一个指令(包含v-if/v-show/v-model)都会被解析成一个Directive，而每一个Directive也会被相应的被一个Watcher监听，对应着一个唯一的Watcher实例。那么当数据变化的时候，如何实现数据对视图的映射呢？这里就涉及到了观察者模式：观察者模式定义了对象见一种一对多的依赖关系，当一个对象的状态发生改变的时候，所以依赖它的对象都将接收到通知，并作出更新。在vue中提出了Dep的概念用于收集依赖，每一个Watcher实例都会被收集到Dep中，当Observer观察到数据发生变化时，通知Dep数据已经发生了改变，然后Dep就会遍历它收集到的Watcher，通知Watcher数据的改变，然后Watcher将数据的改变传给Directive，由指令完成对应视图的更新。

上述分析中少了virtual dom、vnode、patch等步骤，后续会更新

接下来让我们阅读vue的源码，一步一步的分析vue的内部工作原理。

初始化

src/core/instance/index.js

我们找到vue的入口文件，从这里开始，我们逐步分析vue在初始化的时候做了什么。

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

在上述代码中我们可以很容易的看出，我们平时所使用的new Vue就是从这里到处的一个Vue函数，在函数内部初始化state、events、liftcycle、render等，并将Vue传入。

initMixin

src/core/instance/init.js

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // 初始化组件component 合并参数
    if (options && options._isComponent) {
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    //初始化生命周期
    initLifecycle(vm)
    //初始化events
    initEvents(vm)
    //初始化render
    initRender(vm)
    //触发beforeCreate生命函数钩子
    callHook(vm, 'beforeCreate')
    //初始化injection 用于接收父组件传下的数据
    initInjections(vm) // resolve injections before data/props
    //初始化数据
    initState(vm)
    //初始化provide 用于向自组件传递数据
    initProvide(vm) // resolve provide after data/props
    //触发created生命函数钩子
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }
        //绑定入口dom
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

从上述代码中，我们可以了解到，在initMixin的时候，vue做了一下事情：

• 初始化组件 合并参数
• 初始化生命周期函数
• 初始化events
• 初始化render函数
• 触发beforeCreated生命函数钩子
• 初始化injection 等待父组件数据传入
• 初始化state
• 初始化provide用于向子组件传数据
• 触发craeted生命函数钩子
• 绑定vue实例到dom

initLifecycle

初始化生命周期钩子

src/core/instance/lifecycle.js

export function initLifecycle (vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

  vm.$parent = parent
  //找到跟元素
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

initEvents

初始化Events

src/core/instance/initEvents.js

export function updateComponentListeners (
  vm: Component,
  listeners: Object,
  oldListeners: ?Object
) {
  target = vm
  updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
  target = undefined
}

src/core/vdom/helpers/update-listeners.js

export function updateListeners (
  on: Object,
  oldOn: Object,
  add: Function,
  remove: Function,
  createOnceHandler: Function,
  vm: Component
) {
  let name, def, cur, old, event
  for (name in on) {
    def = cur = on[name]
    old = oldOn[name]
    event = normalizeEvent(name)
    /* istanbul ignore if */
    if (__WEEX__ && isPlainObject(def)) {
      cur = def.handler
      event.params = def.params
    }
    if (isUndef(cur)) {
      process.env.NODE_ENV !== 'production' && warn(
        `Invalid handler for event "${event.name}": got ` + String(cur),
        vm
      )
    } else if (isUndef(old)) {
      if (isUndef(cur.fns)) {
        cur = on[name] = createFnInvoker(cur, vm)
      }
      if (isTrue(event.once)) {
        cur = on[name] = createOnceHandler(event.name, cur, event.capture)
      }
      add(event.name, cur, event.capture, event.passive, event.params)
    } else if (cur !== old) {
      old.fns = cur
      on[name] = old
    }
  }
  for (name in oldOn) {
    if (isUndef(on[name])) {
      event = normalizeEvent(name)
      remove(event.name, oldOn[name], event.capture)
    }
  }
}

initRender

src/core/instance/render.js

初始化render函数。

export function initRender(vm: Component) {
    //初始化根结点
  vm._vnode = null; // the root of the child tree
  vm._staticTrees = null; // v-once cached trees
  //获取初始化参数
  const options = vm.$options;
  //获取父级vNode
  const parentVnode = (vm.$vnode = options._parentVnode); // the placeholder node in parent tree
  //获取context
  const renderContext = parentVnode && parentVnode.context;
  //获取插槽
  vm.$slots = resolveSlots(options._renderChildren, renderContext);
  vm.$scopedSlots = emptyObject;
  // bind the createElement fn to this instance
  // so that we get proper render context inside it.
  // args order: tag, data, children, normalizationType, alwaysNormalize
  // internal version is used by render functions compiled from templates
  //绑定createEelment函数到vue实例
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false);
  // normalization is always applied for the public version, used in
  // user-written render functions.
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true);

  // $attrs & $listeners are exposed for easier HOC creation.
  // they need to be reactive so that HOCs using them are always updated
  //获取父组件data数据
  const parentData = parentVnode && parentVnode.data;

  /* istanbul ignore else */
  //监听vm实例上的$attrs $listeners属性
  if (process.env.NODE_ENV !== "production") {
     defineReactive( vm,  "$attrs", (parentData && parentData.attrs) || emptyObject, () => {
        !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm);
      },
      true
    );
    defineReactive( vm, "$listeners", options._parentListeners || emptyObject, () => {
        !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm);
      },
      true
    );
  } else {
    defineReactive( vm,  "$attrs", (parentData && parentData.attrs) || emptyObject, null,true
    );
    defineReactive( vm, "$listeners", options._parentListeners || emptyObject, null,true
    );
  }
}

callHook

src/core/instance/lifecycle.js

触发各个生命函数钩子。

export function callHook (vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  //收集依赖 入栈
  pushTarget()
  const handlers = vm.$options[hook]
  const info = `${hook} hook`
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  //出栈
  popTarget()
}

initInjections

src/core/instance/inject.js

export function initInjections (vm: Component) {
  //获取vm上所有的inject
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    //避免调用defineReactive时触发依赖收集
    toggleObserving(false)
    Object.keys(result).forEach(key => {
        defineReactive(vm, key, result[key])
    })
    toggleObserving(true)
  }
}

initState

src/core/instance/state.js

//vue初始化state
export function initState(vm: Component) {
  vm._watchers = [];
  //获取参数options
  const opts = vm.$options;
  //如果存在props 则初始化initProps
  if (opts.props) initProps(vm, opts.props);
  //如果存在methods 则初始化initMethods
  if (opts.methods) initMethods(vm, opts.methods);
  //如果存在data 则initData(vm)
  if (opts.data) {
    initData(vm);
  } else {
    observe((vm._data = {}), true /* asRootData */);
  }
  if (opts.computed) initComputed(vm, opts.computed);
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch);
  }
}

function initProps(vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {};
  const props = (vm._props = {});
  // cache prop keys so that future props updates can iterate using Array
  // instead of dynamic object key enumeration.
  const keys = (vm.$options._propKeys = []);
  //判断是否是根结点
  const isRoot = !vm.$parent;
  // root instance props should be converted
  //修改observer/index.js中shouldObserve变量  将根结点的数据转化成响应式的
  if (!isRoot) {
    toggleObserving(false);
  }
  for (const key in propsOptions) {
    keys.push(key);
    const value = validateProp(key, propsOptions, propsData, vm);
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== "production") {
      const hyphenatedKey = hyphenate(key);
      if (
        isReservedAttribute(hyphenatedKey) ||
        config.isReservedAttr(hyphenatedKey)
      ) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        );
      }
      defineReactive(props, key, value, () => {
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
              `overwritten whenever the parent component re-renders. ` +
              `Instead, use a data or computed property based on the prop's ` +
              `value. Prop being mutated: "${key}"`,
            vm
          );
        }
      });
    } else {
      //将props变成响应式的数据 监听每一个props的改变
      defineReactive(props, key, value);
    }
    // static props are already proxied on the component's prototype
    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    if (!(key in vm)) {
      proxy(vm, `_props`, key);
    }
  }
  //最后将observer/index.js中shouldObserve变量 变为true
  toggleObserving(true);
}

function initData(vm: Component) {
  let data = vm.$options.data;
  //如果data是function类型 则使用getData获取数据 否则为{}
  data = vm._data = typeof data === "function" ? getData(data, vm) : data || {};
  if (!isPlainObject(data)) {
    data = {};
  // proxy data on instance
  const keys = Object.keys(data);
  //获取当前vue实例中的props methods 检查是否和data中的属性有重复的
  const props = vm.$options.props;
  const methods = vm.$options.methods;
  let i = keys.length;
  while (i--) {
    const key = keys[i];
    proxy(vm, `_data`, key);
  }
  // observe data 将data转化成响应式的
  observe(data, true /* asRootData */);
}

function initMethods(vm: Component, methods: Object) {
  const props = vm.$options.props;
  for (const key in methods) {
    /**
     * 如果methods中的method不为funciton 则使用一个空函数替代
     * export function noop (a?: any, b?: any, c?: any) {}
     * 
     * 否则使用bind绑定this
     * export const bind = Function.prototype.bind
        ? nativeBind
        : polyfillBind
     */
    vm[key] =
      typeof methods[key] !== "function" ? noop : bind(methods[key], vm);
  }
}

function initComputed(vm: Component, computed: Object) {
  // $flow-disable-line
  const watchers = (vm._computedWatchers = Object.create(null));
  // computed properties are just getters during SSR
  const isSSR = isServerRendering();

  for (const key in computed) {
    const userDef = computed[key];
    const getter = typeof userDef === "function" ? userDef : userDef.get;

    if (!isSSR) {
      // create internal watcher for the computed property.
      watchers[key] = new Watcher(
        vm,
        getter || noop,
        noop,
        computedWatcherOptions
      );
    }

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef);
    }
  }
}
//初始化watch 遍历watch对象 将其每一个属性都调用createWatcher变成响应式的
function initWatch(vm: Component, watch: Object) {
  for (const key in watch) {
    const handler = watch[key];
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i]);
      }
    } else {
      createWatcher(vm, key, handler);
    }
  }
}
//创建watcher 返回一个响应式对象
function createWatcher(
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  if (isPlainObject(handler)) {
    options = handler;
    handler = handler.handler;
  }
  if (typeof handler === "string") {
    handler = vm[handler];
  }
  return vm.$watch(expOrFn, handler, options);
}

provide

src/core/instance/provide.js

初始化provide 并将其绑定在vue实例上

export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

stateMixin

export function stateMixin(Vue: Class<Component>) {
  // flow somehow has problems with directly declared definition object
  // when using Object.defineProperty, so we have to procedurally build up
  // the object here.
  const dataDef = {};
  dataDef.get = function () {
    return this._data;
  };
  const propsDef = {};
  propsDef.get = function () {
    return this._props;
  };
  Object.defineProperty(Vue.prototype, "$data", dataDef);
  Object.defineProperty(Vue.prototype, "$props", propsDef);
  //挂载$set API
  Vue.prototype.$set = set;
  //挂载$delete API
  Vue.prototype.$delete = del;
  //实现$watch方法
  Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
    const vm: Component = this;
    //如果是对象 则监听对象
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options);
    }
    options = options || {};
    options.user = true;
    const watcher = new Watcher(vm, expOrFn, cb, options);
    //如果设置了immediate 则立即执行一次
    if (options.immediate) {
      try {
        cb.call(vm, watcher.value);
      } catch (error) {
        handleError(
          error,
          vm,
          `callback for immediate watcher "${watcher.expression}"`
        );
      }
    }
    //返回一个取消监听的函数unwatchFn
    return function unwatchFn() {
      watcher.teardown();
    };
  };
}

在stateMixin中，vue做了这些事：

• 重写了Vue原型上$data 和 $props的get方法。
• 在Vue原型上挂载$set、$delete、$watch方法。

vm.$watch的实现已经在上述代码中，我们看看vm.$set和vm.$delete的实现

src/core/observer/index.js

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 * 新增响应式数据
 */
export function set(target: Array<any> | Object, key: any, val: any): any {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    //调用splice 新增一个元素 并触发数组的setter将其转成响应式数据
    target.splice(key, 1, val);
    return val;
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  //获取observer实例
  const ob = (target: any).__ob__;
  if (target._isVue || (ob && ob.vmCount)) {
    return val;
  }
  //如果不存在__ob__ 则该对象不是响应式的 直接操作属性即可
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  //通知watcher数据的变动
  ob.dep.notify();
  return val;
}

/**
 * Delete a property and trigger change if necessary.
 * 调用splice删除元素 整体流程同set
 */
export function del(target: Array<any> | Object, key: any) {

  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1);
    return;
  }
  const ob = (target: any).__ob__;

  if (!hasOwn(target, key)) {
    return;
  }
  delete target[key];
  if (!ob) {
    return;
  }
  ob.dep.notify();
}

eventsMixin

src/core/instance/event.js

export function eventsMixin (Vue: Class<Component>) {
  const hookRE = /^hook:/
   //在vue原型上挂载$on方法
  Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
    const vm: Component = this
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$on(event[i], fn)
      }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }
    return vm
  }
  //在vue原型上挂载$once方法
  Vue.prototype.$once = function (event: string, fn: Function): Component {
    const vm: Component = this
    function on () {
      vm.$off(event, on)
      fn.apply(vm, arguments)
    }
    on.fn = fn
    vm.$on(event, on)
    return vm
  }
  //在vue原型上挂载$off方法
  Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
    const vm: Component = this
    // all
    if (!arguments.length) {
      vm._events = Object.create(null)
      return vm
    }
    // array of events
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$off(event[i], fn)
      }
      return vm
    }
    // specific event 获取所有对应的事件
    const cbs = vm._events[event]
    if (!cbs) {
      return vm
    }
    if (!fn) {
      vm._events[event] = null
      return vm
    }
    // specific handler
    let cb
    let i = cbs.length
    while (i--) {
      cb = cbs[i]
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1)
        break
      }
    }
    return vm
  }
  //在vue原型上挂载$emit方法
  Vue.prototype.$emit = function (event: string): Component {
    const vm: Component = this;
    let cbs = vm._events[event]
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      const info = `event handler for "${event}"`
      for (let i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info)
      }
    }
    return vm
  }
}

在eventsMixin中，使用了观察者模式，实现在vue挂载了$on、$once、$off、 $emit的方法。

• $on：订阅某个事件
• $once：订阅某个事件 回调只会触发一次
• $off：取消订阅的 某个事件
• $emit：发布某个事件

lifecycleMixin

src/core/instance/lifecycle.js

export function lifecycleMixin (Vue: Class<Component>) {
  //在vue原型上挂载私有方法_update
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el//真实dom
    const prevVnode = vm._vnode//虚拟dom
    const restoreActiveInstance = setActiveInstance(vm)
    vm._vnode = vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      //如果prevVnode不存在 执行新增操作
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      //否则 执行dom diff
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    restoreActiveInstance()
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // if parent is an HOC, update its $el as well
    if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
      vm.$parent.$el = vm.$el
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
  }
  //在vue原型上挂载公共方法$forceUpdate
  Vue.prototype.$forceUpdate = function () {
    const vm: Component = this
    //调用私有方法update触发更新操作
    if (vm._watcher) {
      vm._watcher.update()
    }
  }
  //在vue原型上挂载公共方法$destory
   Vue.prototype.$destroy = function () {
    const vm: Component = this
    if (vm._isBeingDestroyed) {
      return
    }
    //触发boforeDestory生命函数钩子
    callHook(vm, 'beforeDestroy')
    vm._isBeingDestroyed = true
    // remove self from parent
    const parent = vm.$parent
    //清除当前组件和父组件之间的关联 将当前组件从父组件中移除
    //如果有父组件 且父组件没有执行销毁操作 且不是抽象组件
    if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
      remove(parent.$children, vm)
    }
    //去除组件上所有的watcher

    // teardown watchers
    //去除组件自带的watch
    if (vm._watcher) {
      vm._watcher.teardown()
    }
    //去除用户主动使用vm.$watch实现的监听
    let i = vm._watchers.length
    while (i--) {
      vm._watchers[i].teardown()
    }
    // remove reference from data ob
    // frozen object may not have observer.
    if (vm._data.__ob__) {
      vm._data.__ob__.vmCount--
    }
    // call the last hook...
    //如果为true 则组件正在执行销毁
    vm._isDestroyed = true
    // invoke destroy hooks on current rendered tree
    //解除模版中所有的指令
    vm.__patch__(vm._vnode, null)
    // fire destroyed hook
    //触发destrotyed
    callHook(vm, 'destroyed')
    // turn off all instance listeners.
    //移除所有的事件监听
    vm.$off()
    // remove __vue__ reference
    if (vm.$el) {
      vm.$el.__vue__ = null
    }
    // release circular reference (#6759)
    if (vm.$vnode) {
      vm.$vnode.parent = null
    }
  }
}

在lifecycleMixin中，vue做了这些事：

• 在vue原型上挂载了私有方法_update
• 挂载了公共方法$forceUpdate方法
• 挂载了公共方法$destroy方法

renderMixin

src/core/instance/render.js

export function renderMixin(Vue: Class<Component>) {
  //install runtime convenience helpers
  //在vue原型上挂载一下方法和属性
  installRenderHelpers(Vue.prototype);
  //在vue原型上挂载$nextTick方法 
  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this);
  };
  //在vue原型挂载私有方法_render
  Vue.prototype._render = function (): VNode {
    const vm: Component = this;
    const { render, _parentVnode } = vm.$options;

    if (_parentVnode) {
      vm.$scopedSlots = normalizeScopedSlots(
        _parentVnode.data.scopedSlots,
        vm.$slots,
        vm.$scopedSlots
      );
    }

    // set parent vnode. this allows render functions to have access
    // to the data on the placeholder node.
    vm.$vnode = _parentVnode;
    // render self
    let vnode;
    try {
      // There's no need to maintain a stack because all render fns are called
      // separately from one another. Nested component's render fns are called
      // when parent component is patched.
      currentRenderingInstance = vm;
      vnode = render.call(vm._renderProxy, vm.$createElement);
    } catch (e) {
      handleError(e, vm, `render`);
      // return error render result,
      // or previous vnode to prevent render error causing blank component
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== "production" && vm.$options.renderError) {
        try {
          vnode = vm.$options.renderError.call(
            vm._renderProxy,
            vm.$createElement,
            e
          );
        } catch (e) {
          handleError(e, vm, `renderError`);
          vnode = vm._vnode;
        }
      } else {
        vnode = vm._vnode;
      }
    } finally {
      currentRenderingInstance = null;
    }
    // if the returned array contains only a single node, allow it
    if (Array.isArray(vnode) && vnode.length === 1) {
      vnode = vnode[0];
    }
    // return empty vnode in case the render function errored out
    if (!(vnode instanceof VNode)) {
      if (process.env.NODE_ENV !== "production" && Array.isArray(vnode)) {
        warn(
          "Multiple root nodes returned from render function. Render function " +
            "should return a single root node.",
          vm
        );
      }
      vnode = createEmptyVNode();
    }
    // set parent
    vnode.parent = _parentVnode;
    return vnode;
  };
}

在renderMixin中，vue做了这些事：

• 通过函数installRenderHelpers，在vue原型上挂载了一些方法和属性
• 挂载了公共方法$nextTick方法
• 挂载了私有方法_render方法

nextTick

src/core/util/next-tick.js

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'

export let isUsingMicroTask = false

const callbacks = []
let pending = false

function flushCallbacks() {
    pending = false
    const copies = callbacks.slice(0)
    callbacks.length = 0
    for (let i = 0; i < copies.length; i++) {
        copies[i]()
    }
}

let timerFunc

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
    const p = Promise.resolve()
    timerFunc = () => {
        p.then(flushCallbacks)
        // In problematic UIWebViews, Promise.then doesn't completely break, but
        // it can get stuck in a weird state where callbacks are pushed into the
        // microtask queue but the queue isn't being flushed, until the browser
        // needs to do some other work, e.g. handle a timer. Therefore we can
        // "force" the microtask queue to be flushed by adding an empty timer.
        if (isIOS) setTimeout(noop)
    }
    isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    // PhantomJS and iOS 7.x
    MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
    // Use MutationObserver where native Promise is not available,
    // e.g. PhantomJS, iOS7, Android 4.4
    // (#6466 MutationObserver is unreliable in IE11)
    let counter = 1
    //MutationObserver 监听指定节点的变更 如果有变化 则执行回调
    const observer = new MutationObserver(flushCallbacks)
    const textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
        characterData: true
    })
    timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter)
    }
    isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    // Fallback to setImmediate.
    // Technically it leverages the (macro) task queue,
    // but it is still a better choice than setTimeout.
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }
} else {
    // Fallback to setTimeout.
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}

export function nextTick(cb?: Function, ctx?: Object) {
    let _resolve
    callbacks.push(() => {
        if (cb) {
            try {
                cb.call(ctx)
            } catch (e) {
                handleError(e, ctx, 'nextTick')
            }
        } else if (_resolve) {
            _resolve(ctx)
        }
    })
  //如果当前执行队列中无任务正在执行 立即执行
    if (!pending) {
        pending = true
        timerFunc()
    }
    // $flow-disable-line
    if (!cb && typeof Promise !== 'undefined') {
        return new Promise(resolve => {
            _resolve = resolve
        })
    }
}

原理：
nextTick接收两个参数：第一个参数是回调函数、第二个参数是上下文对象ctx。
作用：将回调函数延迟到下次Dom更新之后执行。
实现：通过判断执行环境是否支持以下属性：Promise、MutationObserver、setImmdiate 、setTimeout。然后将回调函数放进上述所说的四个宏任务或者微任务的回调中执行。

小结

在上面，我们逐步分离、了解了Vue的初始化、内部实现原理，理清了每一步的实现步骤。总的来说，Vue初始化的时候，做了以下事情：

1. 初始化生命周期、events、render、触发beforeCreate、初始化injection、state、provide、触发created
2. 在vue原型对象傻姑娘绑定了一些属性和方法，如
   1. 与数据相关的：$set 、$delete 、$watch
   2. 与事件相关的：$on 、$once 、$off 、$emit
   3. 与生命周期相关的：$foreUpdate、 $destroy、 $nextTick、 $mount
3. _

那么接下来我们需要了解的就是Vue在运行时如何处理数据更新的。

运行时

Object.definePrototype

vue内部使用Object.definePrototype对对象进行监测，举个🌰：

function reactive(target,key,value){
    return Object.defineProperty(target,key,{
        enumerable:true,
        configurable:true,
        get:function(){
            console.log(`获取${key}的值：`,value)
            return value
        },
        set:function(newValue){
            console.log(`设置${key}的值：`,newValue);
            value = newValue
        }
    })
}

function Observer(data){
    Object.keys(data).forEach(key => {
        reactive(data,key,data[key])
    })
}

let obj = {
    a:10,
    b:20
}


Observer(obj)

obj.a;//获取a的值： 10
obj.a = 30;//设置a的值： 30

从上述代码中我们可以看到，我们可以使用循环遍历的方式，将其中每一个属性都进行监测，这样之后对对象的读取操作都会被监测到。
那么Array数组也是对象，为什么vue源码中会对数组的方法进行重写呢？下面我们来讨论下数组的情况。

let arr = [1,2,3];

Observer(arr);

arr[0]

arr.unshift(0)

我们可以看到当我们对数组进行操作的时候，是可以监控到数组的变动的。但是，为什么会打印多次数组变动呢？这里就涉及到一点数据结构的知识了，在内存中，数组是存储在堆中的，而且是连续的，如：

…其他内容	1	2	3	4	5	6	…其他内容

那么当我们在操作数组(插入、删除)的时候，就会改变数组的长度，就会移动整个数组，如：arr[i+1] = arr[i]，移动整个数组就会逐步触发我们提前定义的setter/getter，所以就会打印多次。

但是这样并不是我们想要达到的结果，我们不希望它多次触发setter/getter。所以，在Vue源码实现中，拦截重写了这些可以改变数组的方法：push、pop、shift、unshift、sort、reverse、splice。
具体实现在：src/core/observer/array.js

对于数组类型的数据，由于JavaScript的限制，Vue不能监测到内部的变化，会重写数组的部分方法，重写之后可以达到以下两个目的：

• 当数组发生变化之后触发notify，通知相关依赖watcher
• 对于数组新增元素，使用observe进行监听，将新元素也变成响应式的

题外话：Vue2之所以不支持IE8以下，就是因为内部使用了这个API。Vue3使用了Proxy之后，彻底不支持IE了😊。百度之前出的框架SanJS内部使用了defineSetter和defineGetter_ 可以在IE中运行。

Observer

观察者模式是软件设计模式的一种。在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。

订阅者模式涉及三个对象:发布者、主题对象、订阅者，三个对象间的是一对多的关系，
每当主题对象状态发生改变时，其相关依赖对象都会得到通知，并被自动更新。
在Vue中Observer会观察数组和对象两种数据类型：

src/core/observer/index.js src/core/observer/array.js

对于数组类型的数据，由于JavaScript的限制，Vue不能监测到内部的变化，会重写数组的部分方法，重写之后可以达到以下两个目的：

• 当数组发生变化之后触发notify，通知相关依赖watcher
• 对于数组新增元素，使用observe进行监听，将新元素也变成响应式的

而对于Object类型的数据，则遍历它的每个key，使用 defineProperty 设置 getter 和
setter，当触发getter的时候，observe开始收集依赖，触发setter的时候，observe触发notify。

Observer 对象的标志就是
__ob__ 这个属性，这个属性保存了 Observer 对象自己本身。
对象在转化为 Observer 对象的
过程中是一个递归的过程，对象的子元素如果是对象或数组的话，也会转化为 Observer 对象。

其实 observeArray 方法就是对数组进行遍历，递归调用
observe 方法，最终都会走入
walk 方监控单个元素。而
walk 方法就是遍历对象，结合
defineReactive 方法递归将属
性转化为 getter 和 setter。

export function defineReactive(
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  //实例话Dep
  const dep = new Dep();

  const property = Object.getOwnPropertyDescriptor(obj, key);
  //如果对象不可更改
  if (property && property.configurable === false) {
    return;
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get;
  const setter = property && property.set;
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key];
  }

  let childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val;
      if (Dep.target) {
        //收集依赖watcher
        dep.depend();
        if (childOb) {
          childOb.dep.depend();
          //如果是数组，循环遍历
          if (Array.isArray(value)) {
            dependArray(value);
          }
        }
      }
      return value;
    },
    set: function reactiveSetter(newVal) {
      const value = getter ? getter.call(obj) : val;
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return;
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== "production" && customSetter) {
        customSetter();
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return;
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = !shallow && observe(newVal);
      //通知watcher数据变更
      dep.notify();
    },
  });
}

export function observe(value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return;
  }
  let ob: Observer | void;
  //避免重复监听 observer挂载到响应式数据的__ob__属性上
  if (hasOwn(value, "__ob__") && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value);
  }
  if (asRootData && ob) {
    ob.vmCount++;
  }
  return ob;
}

/**
 * Collect dependencies on array elements when the array is touched, since
 * we cannot intercept array element access like property getters.
 * 遍历数组 将每一个元素变成响应式的
 */
function dependArray(value: Array<any>) {
  for (let e, i = 0, l = value.length; i < l; i++) {
    e = value[i];
    e && e.__ob__ && e.__ob__.dep.depend();
    if (Array.isArray(e)) {
      dependArray(e);
    }
  }
}

/**
   * Walk through all properties and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   * 遍历对象 监测每一个属性
   */
  walk(obj: Object) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]);
    }
  }

Watcher

src/core/observer/watcher.js

Watcher是将模版和Observer链接到一起的纽带。Watcher在发布订阅模式中的订阅者。Watcher接收的参数中：expOrFn: String | Function , cb: Function。其中：expOrFn如果是一个函数，则直接赋值给this.getter，用于指定当前订阅者获取数据的方法。如果是字符串，则调用parsePath函数将其转化为一个可执行函数。cb是数据更新时的回调函数。

export default class Watcher {
  vm: Component;
  expression: string;
  cb: Function;
  id: number;
  deep: boolean;
  user: boolean;
  lazy: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  deps: Array<Dep>;
  newDeps: Array<Dep>;
  depIds: SimpleSet;
  newDepIds: SimpleSet;
  before: ?Function;
  getter: Function;
  value: any;

  constructor(
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm;
    if (isRenderWatcher) {
      vm._watcher = this;
    }
    //将当前的Watcher类推送到Vue实例
    vm._watchers.push(this);
    // parse expression for getter
    if (typeof expOrFn === "function") {
      //如果为函数，则相当于指定类订阅者获取数据的方法 每次订阅者通过getter获取到数据之后，与之前的数据进行对比
      this.getter = expOrFn;
    } else {
      //否则将表达式解析为可执行函数
      this.getter = parsePath(expOrFn);
      if (!this.getter) {
        this.getter = noop;
      }
    }
    //如果lazy不为true 则立即搜集依赖
    this.value = this.lazy ? undefined : this.get();
  },
    /**
   * Evaluate the getter, and re-collect dependencies.
   * 收集依赖
   */
  get() {
    pushTarget(this);
    let value;
    const vm = this.vm;
    try {
      //调用getter 收集依赖
      value = this.getter.call(vm, vm);
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`);
      } else {
        throw e;
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value);
      }
      popTarget();
      this.cleanupDeps();
    }
    return value;
  }，

/**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  update() {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true;
    } else if (this.sync) {
      //如果是同步
      this.run();
    } else {
      queueWatcher(this);
    }
  }

依赖收集的入口就是get函数。getter函数是用来连接监控属性和Watcher的关键。只有通过Watcher的getter才会收集依赖。而所谓的搜集的依赖就是当前Watcher实例初始化时传入expOrFn中的每一项数据，然后触发该数据的getter函数，而getter函数通过依赖的Dep.target是否存在来判断是否是初始化调用还是正常的数据读取。如果有target，则进行依赖收集(Observer/index.js)。

我们注意看上面代码中的update方法，该方法会判断是否是同步执行this.sync，如果是，则立即执行；否则，调用queueWatcher方法，将当前watcher放进队列中。
我们来看queueWatcher的实现：

src/core/observe/scheduler.js

/**
 * Push a watcher into the watcher queue.
 * Jobs with duplicate IDs will be skipped unless it's
 * pushed when the queue is being flushed.
 */
export function queueWatcher (watcher: Watcher) {
  const id = watcher.id;
  //判断queuewatcher中是否已存在该watcher
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
        //如果!flushing 则将其push进队列
      queue.push(watcher)
    } else {
        //否则将其插入到queue中
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    //如果没有等待
    if (!waiting) {
      //改变状态 waiting
      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      nextTick(flushSchedulerQueue)
    }
  }
}

Dep

src/core/observer/dep.js

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 * 收集依赖
 */
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++;
    //收集依赖watcher
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }
  //删除依赖watcher
  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }
  //添加依赖watcher
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  //数据更新 通知相关依赖更新
  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    //如果不是异步 则将其进行排序
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

当数据更新时，触发setter，会调用notify方法通知触发订阅者（依赖watcher）的update方法，通知订阅者更新视图。

Directive

当一个组件初始化的时候，会进行数据的初始化和模版编译。初始化数据的时候，会将页面中的数据进行Observer，调用Object.defineProrotype，将数据转化为setter/getter（响应式的数据）。与此同时，模版编译的时候也会将对应的指令转化为Directive，每一个Directive对应一个watcher，然后触发getter将watcher收集进Dep中。当数据发生变化的时候，触发setter，对应的Dep会遍历每一个依赖，通知watcher数据已发生了变化，然后watcher调用update方法触发Directive的update更新视图（中间暂时省略vnode、dom diff、patch等过程）。

关于编译这块vue分了两种类型，一种是文本节点，一种是元素节点。

vue内置了这么多的指令， 这些指令都会抛出两个接口 bind 和 update，这两个接口 的作用是，编译的最后一步是执行所有用到的指令的bind方 法，而 update 方法则是当 watcher 触发 update 时， Directive会触发指令的update 方法
observe -> 触发setter -> watcher -> 触发update -> Directive -> 触发update -> 指令

this._directive.push(
    new Directive(descriptor,this,node,host,scope,frag)
)

1. 所有 tag 为 true 的数据中的扩展对象拿出来生成一个 Directive 实例并添加到 _directives 中( _directives 是当前 vm 中存储所有 directive 实例的地方)。
2. 调用所有已绑定的指令的 bind 方法
3. 实例化一个 Watcher，将指令的 update 与 watcher 绑定在一起(这样就实现了 watcher 接收到消息后触发的 update 方法，指令可以做出对应的更新视图操作)
4. 调用指令的 update，首次初始化视图
5. 这里有一个点需要注意一下，实例化 Watcher 的时候，Watcher 会将自己主动的推入 Dep 依赖中

Scheduler.js

src/core/observer/scheduler.js

当数据发生变更之后，触发 setter，然后在Dep中会遍历当前数据的 Watcher，执行 Watcher.update( )方法，这里我们看下 Watcher.update()的代码：

/**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
  update() {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true;
    } else if (this.sync) {
      //如果是同步 直接执行
      this.run();
    } else {
      //否则放进执行队列中
      queueWatcher(this);
    }
  }

我们可以看到，如果是同步的，则立即执行回调函数，否则，将当前 Watcher 实例放进 watcher queue 中等待执行。

/**
 * Push a watcher into the watcher queue.
 * Jobs with duplicate IDs will be skipped unless it's
 * pushed when the queue is being flushed.
 */
export function queueWatcher (watcher: Watcher) {
  const id = watcher.id;
  //判断queuewatcher中是否已存在该watcher
  if (has[id] == null) {
    has[id] = true
     if (!flushing) {
      //如果队列中无watcher
      queue.push(watcher)
    } else {
      // if already flushing, splice the watcher based on its id
      // if already past its id, it will be run next immediately.
      //否则根据优先级，将其插入到queue中
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // queue the flush
    //如果没有等待
    if (!waiting) {
      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      nextTick(flushSchedulerQueue)
    }
  }
}

在 queueWatcher 函数中，vue 会将 watcher 放入watcher queue，并且，如果当前没有任务在执行的时候，则调用 nextTick 执行当前watcher.run，即执行回调函数。
在 nextTick 函数的源码中，为了让 flush 动作能在当前 Task 结束后尽可能早的开始，Vue 会优先尝试将任务micro-task 队列，具体来说， 在浏览器环境中 Vue 会优先尝试使用 MutationObserver API 或 Promise，如果两者都不可用，则 fallback 到 setTimeout。

Keep-alive

src/core/components/keep-alive.js

或许大家都接过这样一个需求，当用户在A列表页面上拉了一会，跳到了详情页面，然后返回列表页面，需要保持列表页面在之前的的操作结果不变。这时候，我们第一时间想到的就是keep-alive组件，用该组件进行缓存列表页面。那么keep-alive内部是如何实现的呢？让我们一起来看下。

function pruneCache (keepAliveInstance: any, filter: Function) {
  const { cache, keys, _vnode } = keepAliveInstance
  for (const key in cache) {
    //取出缓存中的页面 
    const cachedNode: ?VNode = cache[key]
    if (cachedNode) {
      const name: ?string = getComponentName(cachedNode.componentOptions)
      //如果组件存在 且不满足缓存条件 那么清除
      if (name && !filter(name)) {
        pruneCacheEntry(cache, key, keys, _vnode)
      }
    }
  }
}
//清除缓存组件
function pruneCacheEntry (
  cache: VNodeCache,
  key: string,
  keys: Array<string>,
  current?: VNode
) {
  const cached = cache[key]
  if (cached && (!current || cached.tag !== current.tag)) {
    cached.componentInstance.$destroy()
  }
  cache[key] = null
  remove(keys, key)
}

export default {
  name: 'keep-alive',
  abstract: true,

  props: {
    include: patternTypes,
    exclude: patternTypes,
    max: [String, Number]
  },

  created () {
    this.cache = Object.create(null)
    this.keys = []
  },
  //页面销毁的时候，删除缓存组件及对应的key
  destroyed () {
    for (const key in this.cache) {
      pruneCacheEntry(this.cache, key, this.keys)
    }
  },

  mounted () {
    //加载的时候 从缓存中取出来即将加载的组件
    this.$watch('include', val => {
      pruneCache(this, name => matches(val, name))
    })
    this.$watch('exclude', val => {
      pruneCache(this, name => !matches(val, name))
    })
  },

  render () {
    const slot = this.$slots.default
    const vnode: VNode = getFirstComponentChild(slot)
    const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
    if (componentOptions) {
      // check pattern
      const name: ?string = getComponentName(componentOptions)
      const { include, exclude } = this
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode
      }

      const { cache, keys } = this
      const key: ?string = vnode.key == null
        // same constructor may get registered as different local components
        // so cid alone is not enough (#3269)
        ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
        : vnode.key
      if (cache[key]) {
        //如果组件存在缓存中，则将其取出，并置顶
          //LRU 算法，Least Recently Used 将最近使用的移动到哈希链表末尾 如果链表超过预期长度，将最不常用的删除
        vnode.componentInstance = cache[key].componentInstance
        // make current key freshest
        remove(keys, key)
        keys.push(key)
      } else {
        //如果尚未缓存，将其缓存。如果缓存组件已超出最大值，清除队首组件
        cache[key] = vnode
        keys.push(key)
        // prune oldest entry
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode)
        }
      }

      vnode.data.keepAlive = true
    }
    return vnode || (slot && slot[0])
  }
}

在上述keep-alive的代码实现中，vue使用了LRU缓存算法（LRU，Least Recently Used）将最后使用组件放在队尾位置，将不常使用的组件放在队首位置，一旦缓存即将超出最大值限制，将队首缓存的组件清除，将新的组件缓存。

Virtual-Dom

什么是Virtual-Dom

Virtual-Dom是时代化的产物。
在web早期，页面的交互效果比现在简单很多，也没有那么多的状态需要管理，所以也不需要频繁的操作Dom，使用jQuery就可以解决大部分问题。但是随着时代的发展，我们的页面功能越来越多，产品需求越来越复杂，随之而来的就是页面交互更多、状态越来越难以管理，对Dom的操作也更加频繁。如果我们仍然使用之前的方式进行开发，那么就有可能导致我们的项目逻辑越来越复杂，后期维护成本剧增，甚至出现一些难以维护的代码。

这就是命令式操作Dom的缺点。在当下业务越来越复杂的情况下，它有着难以言喻的痛点。

现在我们使用的前端三大框架：React、Vue、Angular。它们都是生命式的操作Dom，通过生命式的描述状态和Dom之间的映射关系，使用这种映射就可以将状态渲染成视图。至于关于状态到视图的转换操作，框架会在底层帮我们实现，开发者无需手动操作Dom。

DOM操作很慢是两个原因，一个是本身操作就不快，第二是我们(还有很多框架)处理dom的方式很慢，Virtual Dom解决了我们对Dom的低劣操作，它让我们不需要进行Dom操作，而是将希望展现的最终结果告诉 Vue，Vue通过一个简化的Dom即Virtual dom进行 render，当你试图改变显示内容时，新生成的Virtual Dom会 与现在的Virtual dom对比，通过diff算法找到区别，这些操作 都是在快速的js中完成的，最后对实际Dom进行最小的Dom操作来完成效果，这就是Virtual Dom的概念。 rective(descriptor, this, node, host, scope, frag)。

这仅仅是第一层。真正的 DOM 元素非常庞大，这是因为标准就是这么设计的。而且操作它们的时候 我们要小心翼翼，轻微的触碰可能就会导致页面重排，这可是杀死性能的罪魁祸首。
Virtual-dom是一系列的模块集合，用来提供声明式的DOM渲染。来看一个简单的 DOM 片段. 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存:既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM)，最后的时候再把变更写入硬盘(DOM)。

Vue.js中的Virtual-Dom

在Vue.js中使用模版来描述状态和Dom之间的联系。Vue.js通过编译将模版转换成渲染函数Render，然后执行渲染函数即可得到一个Virtual-Dom，通过这个Virtual-Dom即可渲染页面。

Virtual-Dom的目标就是将vnode渲染到dom上。但是如果直接进行渲染的话，会有一些不必要的麻烦。例如：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

如果只有一个li发生了变化，此时根本无需将整个ul替换掉，这样可以避免很大的性能浪费。所以，在vue内部实现时，在更新页面之前，会将vnode和上一次渲染的node节点(oldVNode)进行比较，找出真正需要更新的节点，从而避免操作其他dom节点。

可以看出，VDOM在vue中一共做了两件事：

• 提供和真实Dom对应的Virtual-Dom
• 使用vnode和oldVNpde进行比较，更新视图

其中，vnode只是一个JavaScript对象，它上面绑定了更新Dom所需要的一些数据。对两个vnode、oldVNode进行对比的核心是patch，它在内部判断是哪些节点发生了变化，从而对发生了变化的节点进行更新。

小结

Virtual-Dom是将状态映射成视图的一种解决方案。它的工作原理是使用状态生成vnode，然后使用vnode更新视图。
之所以使用状态先生成vnode，是因为如果直接使用状态改变真是Dom，会有一定程度的性能浪费。而先生成vnode，可以先将vnode缓存，在和上一次生成的渲染时缓存的vnode进行比较，找出真正需要更新的节点，然后更新视图。这样可以避免一部分不必要的Dom操作，节省一部分的性能开销。

vue通过模版来描述状态和视图之间的映射关系，所以它会首先将模版编译成渲染函数Render，执行渲染函数生成vnode，进而更新视图。

因此Virtual-Dom在vue中所做的就是提供和真实Dom对应的vnode，将vnode和oldVNode进行对比，根据对比结果进而更新视图。

VNode

什么是vnode

在Vue.js中存在一个VNode类，在类中定义了VNode的属性的方法。使用该类可以实例化出不同的vnode类型，而不同的vnode类型则表示着不同的dom节点。

export default class VNode {
  tag: string | void;
  data: VNodeData | void;
  children: ?Array<VNode>;
  text: string | void;
  elm: Node | void;
  ns: string | void;
  context: Component | void; // rendered in this component's scope
  key: string | number | void;
  componentOptions: VNodeComponentOptions | void;
  componentInstance: Component | void; // component instance
  parent: VNode | void; // component placeholder node

  // strictly internal
  raw: boolean; // contains raw HTML? (server only)
  isStatic: boolean; // hoisted static node
  isRootInsert: boolean; // necessary for enter transition check
  isComment: boolean; // empty comment placeholder?
  isCloned: boolean; // is a cloned node?
  isOnce: boolean; // is a v-once node?
  asyncFactory: Function | void; // async component factory function
  asyncMeta: Object | void;
  isAsyncPlaceholder: boolean;
  ssrContext: Object | void;
  fnContext: Component | void; // real context vm for functional nodes
  fnOptions: ?ComponentOptions; // for SSR caching
  devtoolsMeta: ?Object; // used to store functional render context for devtools
  fnScopeId: ?string; // functional scope id support

  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.ns = undefined
    this.context = context
    this.fnContext = undefined
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key
    this.componentOptions = componentOptions
    this.componentInstance = undefined
    this.parent = undefined
    this.raw = false
    this.isStatic = false
    this.isRootInsert = true
    this.isComment = false
    this.isCloned = false
    this.isOnce = false
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }

  // DEPRECATED: alias for componentInstance for backwards compat.
  /* istanbul ignore next */
  get child (): Component | void {
    return this.componentInstance
  }
}

从上面的代码中我们可以看出，vnode只是一个JavaScript对象，是从VNode实例化出来的一个实例，只是使用了JavaScript对象进行了描述，所以dom元素上所存在的所有的属性，在vnode上都可以找到。

VNode的作用

因为每次渲染视图时都需要先创建vnode，然后再用它创建dom插入视图中，所以我们可以将vnode缓存起来，这样，当每次创建vnode时，将新创建的vnode和上次渲染时创建的vnode进行对比，查找它们之间的不同之处，就可以获取具体需要更新的节点位置，基于此再去更新dom。
而且在vue2.0中采用了中等粒度的侦测策略，只侦测到组件级别，当数据改变的时候，通知组件，由组件自身使用vnode进行视图的更新。

VNode的类型

vnode有很多不同的类型，下面让我们看下vnode不同节点类型之间的区别：

• 注释节点
• 文本节点
• 元素节点
• 组件节点
• 函数式组件
• 克隆节点

上面我们介绍过vnode只是一个普通的JavaScript对象类型而已，而不同的节点类型只是属性不同，准确来说是有效属性不同，当实例化一个vnode时，通过参数来设置有效属性，无效的属性会被默认为undefined或null。对应无效的属性，忽略即可。

注释节点

注释节点的创建很简单，我们直接通过代码查看即可。

export const createEmptyVNode = (text: string = '') => {
  const node = new VNode()
  node.text = text
  node.isComment = true
  return node
}

我们可以看到一个注释节点只有两个有效属性：

• text：注释文本内容
• isComment

其他属性均为undefined或者null
例如：

<!--这是一个注释节点-->

{
    text:"这是一个注释节点",
  isComment:true
}

文本节点

文本节点的创建也很简单，直接看代码。

export function createTextVNode (val: string | number) {
  return new VNode(undefined, undefined, undefined, String(val))
}

结合上面的VNode类一起看，我们发现文本节点只有一个有效属性：text。

克隆节点

克隆节点是将现有节点进行克隆，克隆之后具备现有节点的一切属性。它的作用是优化静态节点和插槽节点（slot node）。

// optimized shallow clone
// used for static nodes and slot nodes because they may be reused across
// multiple renders, cloning them avoids errors when DOM manipulations rely
// on their elm reference.
export function cloneVNode (vnode: VNode): VNode {
  const cloned = new VNode(
    vnode.tag,
    vnode.data,
    // #7975
    // clone children array to avoid mutating original in case of cloning
    // a child.
    vnode.children && vnode.children.slice(),
    vnode.text,
    vnode.elm,
    vnode.context,
    vnode.componentOptions,
    vnode.asyncFactory
  )
  cloned.ns = vnode.ns
  cloned.isStatic = vnode.isStatic
  cloned.key = vnode.key
  cloned.isComment = vnode.isComment
  cloned.fnContext = vnode.fnContext
  cloned.fnOptions = vnode.fnOptions
  cloned.fnScopeId = vnode.fnScopeId
  cloned.asyncMeta = vnode.asyncMeta
  cloned.isCloned = true
  return cloned
}

可以看出，在克隆时，只需要将被克隆的节点的所有属性赋值到新节点即可。克隆节点和原节点唯一的不同是克隆节点的isClone为true，而被克隆节点的isClone为false。

元素节点

元素节点通常存在以下四个属性：

• tag：表示当前节点的名称，如p、div等
• data：表示当前节点上的数据，如style、attrs等
• children：表示当前节点的子节点列表
• context：表示当前节点的vue实例

例如：

<div>
  <p>第一个子节点</p>
  <span>第二个自节点</span>
</div>

其对应的vnode：

{
        tag:'div',
    data:{...},
    children:[...],
    context:{...}
}

组件节点

组件节点有以下两个属性：

• componentOptions：指的是当前组件节点的选项参数，如propData、tag、children等
• componentInstance：组件的实例，即vue的实例。其实每一个组件都是一个vue实例

例如：

<child></child>

对应的组件节点：

{
  componentOptions:{...},
  componentInstance:{...},
    context:{...},
  data:{...},
  tag:'vue-component-1-child'
}

函数式组件

函数式组件和组件节点类似，但是它有两个独有的属性：functionialContext 和 functionialOptions。

小结

VNode是一个类，可以用于生成不同类型的vnode。而不同类型的vnode代表着不同的真是的dom类型。
Vue.js中并不是直接更新dom节点，而是先生成vnode，将新创建的vnode和上次渲染生成的vnode进行比较，找出真实需要更新的节点，节省了性能的开销。
vnode有很多种类型，它们本质上都是从VNode中实例化出来的对象，只是有效属性不同而已。

Patch

​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​