**在Node.js中，事件循环是一个非常重要的概念。事件循环是指Node.js在执行异步操作时，采用的一种事件驱动的机制。通过事件循环，Node.js可以实现高效的I/O操作，同时也可以避免出现阻塞或死锁的情况。**

**了解事件循环对于Node.js开发者来说非常重要，因为它涉及到Node.js的异步编程模型和运行机制。在本文中，我们将深入探讨Node.js事件循环的概念、运行机制和实现原理。**




# 事件循环阶段
Node的事件循环分为多个阶段
1. timers阶段
2. pending/callback阶段
3. idea阶段
4. poll阶段
5. check阶段
6. close阶段


![image.png](https://blog.ccz.life/static/img/ecebd0408936c444693fa6ead94db60a.image.png)

- times阶段：执行setTimeout 和 setInterval的回调函数
- pending/callback阶段：执行延迟到下一个循环迭代的I/O回调
- idle：仅系统内部调用
- poll：检索新的I/O事件，大部分I/O事件的回调在这里运行，清空队列以后，会去查询是否有setImmediate的调度，若有，则会等待setImmediate加入队列，然后执行，若没有setImmediate的调度，则会去检查是否有timers阶段的调度，若有，则会等待计时器加入队列，然后绕回到timers阶段进行执行，如果没有timers的调度，事件循环会阻塞在poll阶段
- check：setImmediate的回调函数在这里执行
- close：关闭阶段的回调函数执行，比如socket的关闭

# Node不同版本微任务的不同
V11后：微任务的执行顺序和浏览器保持一致，每个宏任务结束以后查询是否有微任务

V11前：阶段结束后，去查询是否有微任务

process.nextTick的优先级比微任务高

Node 事件循环

**TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，提供了静态类型检查、面向对象编程、泛型等高级特性，可以使 JavaScript 代码更加可读、可维护和可扩展。随着 TypeScript 在前端开发中的广泛应用，学习 TypeScript 已经成为了前端开发者必不可少的技能之一。**



# 类
## 参数默认值+类型定义
单值定义
```ts
class Animal {
    move(distance:number=0){
        console.log(`Animal moved ${distance}m`)
    }
}
```
对象定义
```ts
class Animal {
    move(obj:{a:string,b:number}={a:'1',b:2}){
        console.log(`Animal moved ${obj.a}${obj.b}m`)
    }
}
```
## super关键字
super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例。

因此super()在这里相当于A.prototype.constructor.call(this)。

super.move()相当于A.prototype.move.call(this)。

## 类型定义为class
```ts
class Animal {
    name:string
    constructor(name:string){
        this.name=name
    }
    move(distance:number=0){
        console.log(`${this.name} moved ${distance}m`)
    }
}
class Horse extends Animal {
    constructor(name:string){
        super(name)
    }
}
let tom:Animal=new Horse('Tommy')
tom.move(14)
```

## getter setter（es6提供）
兼容性：存取器要求你将编译器设置为输出 ECMAScript 5 或更高。

不支持降级到 ECMAScript 3。

因为使用到了Object.defineProperty这个API

命令：
```shell
tsc --target es5  index.ts
```

```ts
class Person {
    private name:string
    constructor(name){
        this.fullName=name
    }
    get fullName():string{
        return this.name
    }
    set fullName(name:string){
        this.name='Str '+name
    }
}
let p=new Person('Xiao Ming')
console.log(p.fullName)
```

## public、private、protected（TS提供）

### 公共修饰符(public)
默认为 public
```ts
class Animal {
    public name: string  // => name: string效果一致
    public constructor(name: string) {
        this.name = name
    }
}
new Animal('wain').name  // 可以被访问到
```

### 私有修饰符(private)
不可以被实例化访问，不可以被extends继承，完全私有
```ts
class Animal {
    private name: string
    constructor(name: string) {
        this.name = name
    }
}
new Animal('Cat').name // ERROR: 'name' 是私有的.
```

### 受保护的修饰符(protected)
不可以被实例化访问，可以被extends继承
```ts
class Animal {
    private name: string
    protected constructor(name: string) {
        this.name = name
        console.log('s1')
    }
}
let a=new Animal('1') // 无法被初始化，因为constructor是受保护的
```

## 抽象类
abstract 关键字是用于定义抽象类和在抽象类内部定义抽象方法。

抽象类做为其它派生类的基类使用。 它们一般不会直接被实例化。不同于接口，抽象类可以包含成员的实现细节。

```ts
abstract class Department {
    name: string
    constructor(name: string) {
        this.name = name
    }
    printName(): void {
        console.log('Department name: ' + this.name)
    }
    abstract printMeeting(): void // 必须在派生类中实现
}

class AccountingDepartment extends Department {
    constructor() {
        super('Accounting and Auditing') // 在派生类的构造函数中必须调用 super()
    }
    printMeeting(): void {
        console.log('The Accounting Department meets each Monday at 10am.')
    }
    generateReports(): void {
        console.log('Generating accounting reports...')
    }
}

let department: Department // 允许创建一个对抽象类型的引用
department = new Department() // 错误: 不能创建一个抽象类的实例
department = new AccountingDepartment() // 允许对一个抽象子类进行实例化和赋值
department.printName()
department.printMeeting()
department.generateReports() // 错误: 方法在声明的抽象类中不存在
```

# 泛型
## 泛型讲解
在像 C# 和 Java 这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。
```ts
// 定义泛型
function identity<T>(arg: T):T {
    return arg
}
// 使用泛型
let output1=identity<string>('myString')  //方式一
let output2=identity(2)   //方式二  类型推断
```

## 泛型变量
接收类型参数 T 和参数 arg，它是个元素类型是 T 的数组，并返回元素类型是T 的数组。 如果我们传入数字数组，将返回一个数字数组，因为此时 T 的的类型为 number。 这可以让我们把泛型变量 T 当做类型的一部分使用，而不是整个类型，增加了灵活性。
```ts
function identity<T>(arg: T[]):T[] {
    console.log(arg.length)
    return arg
}

let output1=identity([1,2,3])
let output2=identity(['1','2','3'])
let output3=identity([1,'2','3'])
```

## 泛型类型
方式一：
```ts
function identity<T>(arg: T): T {
    return arg
}
let myIdentity: <T>(arg: T) => T = identity
```
方式二：对象字面量来定义泛型函数
```ts
function identity<T>(arg:T):T {
    return arg
}
let myIdentity:{<T>(arg:T):T}=identity
```
方式三：泛型接口
```ts
interface GenericIdentityFn<T>{
    (arg:T):T
}
function identity<T>(arg:T):T {
    return arg
}
let myIdentity:GenericIdentityFn<number []>=identity
```

## 泛型约束
约束必须存在的字段类型
```ts
interface Lengthwise {
    length: number
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length) // OK
    return arg
}
console.log(loggingIdentity(1)) // ERROR
console.log(loggingIdentity('1')) // OK
```

约束字段需要存在于对象中
```ts
function getProperty<T,K extends keyof T>(obj:T,key:K){
  return obj[key]
}
let x={a:1,b:2,c:3}
getProperty(x,'a') // OK
getProperty(x,'m') // ERROR
```

## 泛型类
```ts
class GenericNumber<T> {
    zeroValue: T
    add: (x: T, y: T) => T
}

let myGenericNumber = new GenericNumber<number>()
myGenericNumber.zeroValue = 0
myGenericNumber.add = function(x, y) {
    return x + y
}
```


# 类型推断
## 推断出通用类型
为了推断 x 的类型，我们必须考虑所有元素的类型，这里有两种选择：number 和 null
```
let x = [0, 1, null]
```

## 无法推断超级类型

这里，我们想让 zoo 被推断为 Animal[] 类型，但是这个数组里没有对象是 Animal 类型的，因此不能推断出这个结果。最终会被推断为联合类型(Bee | Lion)[]
```ts
class Animal {
    numLegs: number
}
class Bee extends Animal {}
class Lion extends Animal {}
let zoo = [new Bee(), new Lion()]
```

## 上下文类型推断
```ts
window.onmousedown=function(mouseEvent){  
    console.log(mouseEvent.clickTime) // ERROR，TS会自己进行上下文推断
}
// 解决问题：
window.onmousedown=function(mouseEvent:any){  
    console.log(mouseEvent.clickTime)
}
```

# keyof typeof
## keyof
返回键值的联合类型
```ts
enum testEnum {
  a,
  b
}

const obj = {}
const arr = []

type a = keyof {} //  OK  返回never
type b = keyof obj // ERROR

type c = keyof [] // OK 返回Array.prototype的联合类型
type d = keyof arr //ERROR

type e= keyof testEnum // OK 返回Number.prototype的联合类型
```

## typeof
在ts中，额外的功能点是返回当前值的接口类型
```ts
enum testEnum {
  a,
  b
}

const obj = {}
const arr = []

type a = typeof {} // ERROR
type b = typeof obj // OK 返回{}

type c = typeof  [] // ERROR
type d = typeof arr // OK 返回 never[]

type e= typeof testEnum // OK 返回testEnum的接口类型
```

# 命名空间

## declare 
定义的类型只会用于编译时的检查，编译结果中会被删除
```ts
// 定义全局变量
declare var $:(param:()=>void)=>void

// 定义全局函数
interface JqueryInstance {
  html:(html:string)=>JqueryInstance
}

// 函数重载
declare function $(readFunc:()=>void):void
declare function $(selector:string):JqueryInstance

// 定义对象
declare namespace $ {
  namespace fn {
    class init {}
  }
}

// 使用interface的语法， 实现函数重载（如果同时该值还是对象的话，就无法使用这种方式）
interface Jquery {
  (readFunc:()=>void):void
  (selector:string):JqueryInstance
}
declare var $:Jquery
```

## namespace
commonjs模式下，定义变量和函数会在全局定义。这个时候，我们不想变量在全局定义，我们就需要用到namespace。

当我们用ts定义一个变量或者函数
```js
let a=1
class B {
  
}
```
在编译后，他会被定义到全局
```js
var a = 1;
var B = /** @class */ (function () {
    function B() {
    }
    return B;
}());
```
这显然并不是我们想看到的，因为他污染了全局变量。
我们可以这样做，使用namespace申明一个Home变量（全局），使用export导出变量。这样我们就可以通过
Home.c访问到变量，Home.a和Home.B无法进行访问，因为它们没有进行导出
```ts
namespace Home {
  let a=1
  class B {
  }
  export let c=100
}
```

## reference
配合namespace使用

.tsconfig.json
```json
"compilerOptions": {
   "module": "amd",   
   "outFile": "./build/cs.js",    
   }
```
可以使用outFile将多个文件打成一个文件。
如果此时文件存在引用关系的话，则需要reference来定义执行顺序，
否则a文件引用b文件，a文件却先执行，这样代码逻辑就会出现问题。
```ts
///<reference path='./cs.ts'/>
namespace Home {
  export let a=10
}
```
使用reference，提前加载cs.ts，保证执行顺序

TypeScript 学习下篇

**TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，提供了静态类型检查、面向对象编程、泛型等高级特性，可以使 JavaScript 代码更加可读、可维护和可扩展。随着 TypeScript 在前端开发中的广泛应用，学习 TypeScript 已经成为了前端开发者必不可少的技能之一。**



# tsc命令
使用tsc命令，并且指定编译文件时，不会使用tsconfig.json文件进行编译
```shell
tsc idnex.ts
```

使用tsc命令，并且不添加任何参数时，会使用tsconfig.json文件进行编译
```
tsc
```


# 基本类型
## string
```ts
let str:string='bob'
```

## number
```ts
// 普通数字类型（默认十进制）
let decLiteral: number = 20


// 主动设置进制
let hexLiteral: number = 0x14  //（16进制）
let binaryLiteral: number = 0b10100  //（2进制）
let octalLiteral: number = 0o24    //（8进制）
```

## boolean
```ts
// 主动申明类型，申明isDone为boolean类型，后续isDone只能为boolean类型
let isDone: boolean = false 

// Ts默认指定初次类型，ts会默认为boolean类型，后续isDone只能为boolean类型
let isDone = false
```

## void
通常我们用于函数。当一个函数没有返回值时，你通常会见到其返回值类型是 void

声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null（因为 undefined 和 null是所有类型的子类型）

```ts
function warnUser():void{
    console.log('This is my waring message')
}
```



## null 和 undefined
默认情况下 null 和 undefined 是其他任意类型的子类型（除了never）, 就是说你可以把 null 和 undefined 赋值给其他类型的变量。

null和undefined使用
```ts
let u: undefined = undefined
let n: null = null
```

可以赋值给其他类型
```ts
let str:string='boo'
str=null
```

严格检查
如果开启严格检查，将无法任意赋值给其他类型，只能赋值给void类型（undefined）

```ts
let str:void = null   //无法生效
let str:void = undefined   //可以生效
```

也许在某处你想传入一个 string 或 null 或 undefined，你可以使用联合类型 string | null | undefined

## never
never 类型表示的是那些永不存在的值的类型。never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never 类型，当它们被永不为真的类型保护所约束时。
never 是其它类型（包括 null 和 undefined）的子类型

```ts
function error(message:string):never{
 throw new Error(message)
}

function loop():never {
    while(true){ }
}
```

## any
any跳过类型检查，可以为任何值,但是无法赋值给never
```ts
let notSure: any = 4
notSure = 'maybe a string instead'
notSure = false

let list:any []=[1,'2',true]
let list1:Array<any>=[1,'2',true]
```


## 数组
申明全为数字的数组

 ```ts
 //  第一种，可以在元素类型后面接上
let list:number []=[1,2,3,4,5]
// 第二种方式是使用数组泛型，Array<元素类型>
let list:Array<number>=[1,2,3,4,5]
```

数组类型错误示范
```
let list:[]=[1,2,3,4,5]  // Error
let list:Array=[1,2,3,4,5] // Error
```

多维数组使用
```ts
function f(arr:number [][]){  // 定义类型的时候，二维数组时为[][]
}
f([[1,2,3],[4,5,6]])
```

## 元祖
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
```ts
let x:[number,string]=[1,'hello']
let x:[number,string]=[1,'hello',1] // Error 超过已定义的元素数量，会报错
```

当访问一个已知索引的元素，会得到正确的类型
```
console.log(x[0].substr(1))  // Error
console.log(x[1].substr(1)) 
```

## 对象
```ts
// 第一种定义方式
declare function create(o:object|null):void
create({prop:0})

// 第二种定义方式
let obj:object|null={}
obj=null
```

## enum
enum 类型是对 JavaScript 标准数据类型的一个补充

key值必须是字母开头，value必须是数字

**默认情况下，从 0 开始为元素编号**
```ts
enum Color {Red, Green, Blue}
let c= Color.Red
console.log(c)  //0
```

**提供反查功能**
```ts
enum Color {Red, Green, Blue}
let c= Color.Red
let d=Color[0]
console.log(c,d)   //0,'Red'

```

## 类型断言
有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

尖括号”语法方式
```ts
let someValue: any = 'this is a string'
let strLength: number = (<string>someValue).length
```
as 语法
```ts
let someValue: any = 'this is a string'
let strLength: number = (someValue as string).length
```

## 类型总结
```
       string
       number                  
       boolean        null        
any    void      =>   undefined   =>  never 
       array
       object
       void   
```
 
- any类型可以等于任意值（无法赋值给never）
- never是所有类型的子类型，无法接受其他赋值，只能赋值给别人。
- 赋值时只是赋这个变量，而不是类型，赋值时，ts是比较的类型，而不是值。
```ts
let a:any='1'
let n:number=1
n=a
n='2'  // err
n=2   // ok
```

# interface
## 可选属性
```ts
interface SquareConfig {
    color?: string,
    width?: number,
    height:number
}
```
color和width为可选属性，非必填项。
height为必填属性。

## 只读属性
```ts
interface Point {
    readonly x:number,
    readonly y:number
}
let p1:Point={x:10, y:20}
p1.x=30   // Error
```

## 属性检查

![image.png](https://blog.ccz.life/static/img/919723980c6ed570369bbe975e1ed2a5.image.png)

**问题：使用到接口未定义的值时，会报错。**

方案一：类型断言
```ts
let mySquare=createSquare({colour:'123'} as SquareConfig) 
```

方案二：字符串索引联合签名
```ts
interface SquareConfig {
    color?: string,
    width?: number,
    [propName:string]:any
}      
```

方案三：将这个对象赋值给一个另一个变量（不推荐，逃避检查）
```ts
let options={colour:'123'}
let mySquare=createSquare(options )
```


## 函数类型
- 对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配
- 参数的个数以及返回值需要和接口定义的相同

```ts
interface SearchFunc {
    (source:string,subString:string):boolean
}
let mySearch:SearchFunc=function(src,sub){
    let result=src.search(sub)
    return result>-1
}
```

## 可索引类型
申明当用数字索引时，返回的值只能是string类型
```ts
interface StringArray {
    [index: number]: string
}
let myArray: StringArray
myArray = ['Bob', 'Fred']
let myStr: string = myArray[0]
```


## 混合类型
```ts
interface Counter {
    (start: number): string
    interval: number
    reset(): void
}

function getCounter(): Counter {
    let counter = (function (start: number) { }) as Counter  //将couter断言为Counter
    counter.interval = 123
    counter.reset = function () { }
    return counter
}

let c = getCounter()
c(10)
c.reset()
c.interval = 5.0
```

## 类类型
当一个类实现了一个接口时，只对其实例部分进行类型检查。

constructor 存在于类的静态部分，所以不在检查的范围内。

不会对函数参数部分进行检查，但是会对返回值进行检查（void行为怪异）

### 参数检查
接口设置的参数不会被默认继承到类的参数里面

例子1：类里的函数参数没有被类型检查
```ts
interface Clock {
    a(x:string,y:string):void
}
class C implements Clock{
    a(x,y){
        return 10
    }
}
let c=new C()
c.a('1',33) // 成功 y值为string，但是设置为数字类型也通过了，说明类的参数里面没有类型要求
```

例子2：类里的函数参数需手动设置类型检查
```ts
interface Clock {
    a(x:string,y:string):void
}
class C implements Clock{
    a(x:string,y:string){ // 类型改成number，会报错，需要和接口里面申明的一致
        return 10
    }
let c=new C()
c.a('1','12')  // 正确，参数改成数字会报错
```


### 返回值检查
返回值设置为string，number等这些类型，会被检查，设置为void不会被检查

例子1：string返回值检查
```ts
interface Clock {
    a():string    
}
class C implements Clock{
    a(){
      return 1   // 错误，改成'1'即可
    }
}
```
例子2：void返回值不检查
```ts
interface Clock {
    a():void
}
class C implements Clock{
    a(){
        return 1 // 正确，改成‘1’也可以，改成任意值都可以。怀疑设置成void的时，不会进行返回值检查
    }
}
```

### 静态类型检测
```ts
interface Interface {
    new(hour: number, minute: number)
}
class DigitalClock  {
    constructor(hour,minute) {
    }
}
let A:Interface=DigitalClock
let b=new A(1,2)
```

## 接口继承
```ts
interface Shape {
    color:string
}
interface PenStroke {
    penWidth:number
}
interface Square extends Shape,PenStroke{
    sideLength:number
}

let square={} as Square //接口断言时，如s as Square，s必须包含Square，但是{ } 不用

square.color='blue'
square.penWidth=5.0
square.sideLength=10
```

## 接口继承类
当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的 private 和 protected 成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。
实际发现会继承类的成员包括实现
```ts
class Control {
    private state: any
}
interface SelectableControl extends Control {
    select(): void
}

// 说明：SelectableControl 会继承私有属性private state: any


class ImageC implements SelectableControl {  // Error：“ImageC”类型缺少“state”属性。
    select() { }
}

class Button extends Control implements SelectableControl {  //先继承Control 私有属性
    select() { }
}
```

# type
```ts
type Easing = 'ease-in' | 'ease-out' | 'ease-in-out'
let a:Easing='ease-in'   // OK
let b:Easing='ease'     // ERR

```

# 函数

## 类型推断
ts会自己根据类型进行推断
```ts
// 第一种
let myAdd:(x:number,y:number)=>number=function(x,y){  
    return x+y
}
// 第二种
let myAdd=(x:number,y:number):number=>{  
    return x+y
}

```

## this
```ts
interface Deck {
    name:string,
    getName(this:Deck):()=>String
}

let deck:Deck={
    name:'str',
    getName:function (this:Deck) {
        return ()=>{
            return this.name
        }
    }
}
let f1=deck.getName()
console.log(f1())
```

## 重载(ts提供)
```ts
function pickCard(x:number,b:string):number
function pickCard(x:string,b:number):string

function pickCard(x,y):any{
    return x
}

console.log(pickCard('1',2))
```

# 类型保护
typeof类型保护
```ts
let a:string|number
if(typeof a==='string'){
    console.log(a.length) // OK
    console.log(a.toFixed()) // ERR
}
if(typeof a==='number'){
    console.log(a.length)  // OK
    console.log(a.toFixed())  // ERR
}
```

instanceof 类型保护
```ts
class Bird {
    fly () {
        console.log('bird fly')
    }
}
class Fish {
    swim () {
        console.log('fish swim')
    }
}

function getRandomPet () {
    return Math.random() > 0.5 ? new Bird() : new Fish()
}

let pet = getRandomPet()
if (pet instanceof Bird) {
    pet.fly()
}
if (pet instanceof Fish) {
    pet.swim()
}
```

TypeScript 学习上篇

### ios10及以上Safari无法禁止缩放的问题

```js
export function disableSafariScalable() {
  // 阻止双击放大
  let ua =navigator.userAgent;
  let isSafariBrowser = /Safari/.test(ua) && !/Chrome/.test(ua);
  if(isSafariBrowser){
    let lastTouchEnd = 0;
    document.addEventListener('touchstart', function(event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    });
    document.addEventListener('touchend', function(event) {
      let now = (new Date()).getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    }, false);

    // 阻止双指放大
    document.addEventListener('gesturestart', function(event) {
      event.preventDefault();
    });
  }
}
```

IOS10 及以上 Safari 无法禁止缩放的问题

## 服务端渲染，不包含Ajax初始化数据

### 1. webpack config 创建
创建两份webpack配置文件，一份为客户端运行文件，一份服务端运行文件
同时我们也需要创建两个入口文件，一个给客户端，一个给服务端。

webpack.server.conf.js

打包服务端代码
```js
    target:'node',
    output:{
      libraryTarget:'commonjs2'
    }
```
不使用自己生成的server.bundle.js，使用client.bundle.js文件。客户端激活server.bundle.js会在开启node服务时被用到
```js
new HtmlWebpackPlugin({
    template: path.resolve(__dirname,'../index.ssr.html'),
    filename:'index.ssr.html',
    files:{
        js:'client.bundle.js'
    },
    excludeChunks:['server']
})
```

### 2. 独立生成新的应用程序实例，避免交叉请求造成的状态污染
以函数形式导出，每次服务端调用时执行函数，生成一份全新的app
```js
import Vue from 'vue'
import App from './App.vue'
export default ()=> {
    const app=new Vue({
        el:'#app',
        render:h=>h(App)
    })
    return {
        app
    }
}
```


### 3. ssr.html介绍

``的作用是作为一个占位符，后续通过vue-server-renderer插件，将服务器解析出的组件html字符串插入到这里。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务端渲染</title>
</head>
<body>

<script type="text/javascript" src="<%= htmlWebpackPlugin.options.files.js %>"></script>
</body>
</html>
```

### 4. 创建server服务
```js
createBundleRenderer(serverBundle, { /* 选项 */ })
// serverBundle为webpack编译过后的代码

let renderer=createBundleRenderer(bundle,{   // 创建renderer，此时renderer会有两个值，renderToString和renderToStream
    template:fs.readFileSync(path.resolve(__dirname,'../dist/index.ssr.html'),'utf-8')
})
renderer.renderToString((err,html)=>{  // 返回编译过后的代码
    console.log(html)
    ctx.status =200
    ctx.body=html
})
```
完整代码：
```js
const Koa = require('koa');
const Router = require('koa-router');
const serve = require('koa-static');
const path = require('path');
const fs = require('fs');
const { createBundleRenderer } = require('vue-server-renderer')
const backendApp  = new Koa();
const backendRouter  = new Router();

let bundle=fs.readFileSync(path.resolve(__dirname,'../dist/server.bundle.js'),'utf-8')
let renderer=createBundleRenderer(bundle,{
    template:fs.readFileSync(path.resolve(__dirname,'../dist/index.ssr.html'),'utf-8')
})

backendRouter.get('*',(ctx,next)=>{
    renderer.renderToString((err,html)=>{
        if (err) {
            console.error(err);
            ctx.status = 500;
            ctx.body = '服务器内部错误';
        } else {
            ctx.body = html;
        }
    })
})
backendApp .use(serve(path.resolve(__dirname,'../dist')))
backendApp .use(backendRouter.routes()).use(backendRouter.allowedMethods())
backendApp.listen(3000,()=>{
    console.log('服务器端渲染地址： http://localhost:3000');
}) 
```

## 服务端渲染，包含Ajax初始化数据

**思路：**

1. 在渲染前，要预先获取所有需要的异步数据，然后存到Vuex的store中。

2. 在后端渲染时，通过Vuex将获取到的数据注入到相应组件中。

3. 把store中的数据设置到window.__INITIAL_STATE__属性中。

4. 在浏览器环境中，通过Vuex将window.__INITIAL_STATE__里面的数据注入到相应组件中。

### 1.服务端vuex覆盖客户端vuex
```js
    if (typeof window !== 'undefined' && window.__INITIAL_STATE__) {
        console.log('window.__INITIAL_STATE__', window.__INITIAL_STATE__);
        store.replaceState(window.__INITIAL_STATE__);
        }
```
### 2.在组件里面申明asyncData函数
```js
fetchInitialData 执行后，最终会返回Promise
const fetchInitialData = ({ store }) => {
   return  store.dispatch('fetchBar');
};
```
### 3.入口文件执行完asyncData函数后，才返回app记录App当前下所有的子组件，如果存在asyncData函数，则添加到数组。

所有的asyncData执行完毕以后，才会resolve，context.state 会赋值给window.__INITIAL_STATE__
```js
export default (context)=>{
    return new Promise((resolve,reject)=>{
        const {App,store,app}=createApp()
        let components=App.components
        let asyncDataPromiseFns = []
        Object.values(components).forEach(component=>{
            if(component.asyncData) asyncDataPromiseFns.push(component.asyncData({store}))
        })
        Promise.all(asyncDataPromiseFns).then(result=>{
            context.state = store.state;
            console.log(222);
            console.log(store.state);
            console.log(context.state);
            console.log(context);
            resolve(app);
        })
    })
}
```

### 4.server.js需要添加await
因为现在入口文件返回的是Promise，且在异步返回以后，才会return。
所以我们服务端需要等待入口文件的asyncData执行完以后，才能往下走，否则会有问题
```js
try {
    let html=await new Promise((resolve,reject)=>{
        renderer.renderToString((err,html)=>{
            if (err) {
                reject(err)
            } else {
                resolve(html)
            }
        })
    })
    ctx.status=200
    ctx.body=html
}
catch (err) {
    console.error(err);
    ctx.status = 500;
    ctx.body = '服务器内部错误';
}
```

## 使用serverBundle和clientManifest进行优化
1. 内置的 source map 支持（在 webpack 配置中使用 devtool: 'source-map'）
在开发环境甚至部署过程中热重载（通过读取更新后的 bundle，然后重新创建 renderer 实例）
2. 关键 CSS(critical CSS) 注入（在使用 *.vue 文件时）：自动内联在渲染过程中用到的组件所需的CSS。更多细节请查看 CSS 章节。
3. 使用 clientManifest 进行资源注入：自动推断出最佳的预加载(preload)和预取(prefetch)指令，以及初始渲染所需的代码分割 chunk。


### 1.两份webpack配置文件分别使用
```js
require('vue-server-renderer/client-plugin')
和
require('vue-server-renderer/server-plugin')
```

webpack.server.conf.js
```js
const nodeExternals = require('webpack-node-externals')
devtool: '#source-map',   // 对bundle renderer 提供 source map 支持
externals: [nodeExternals()],   // 打包时忽略node_modules里面的包
```
### 2.server添加配置
```js
const serverBundle = require(path.resolve(__dirname, '../dist/vue-ssr-server-bundle.json'));
const clientManifest = require(path.resolve(__dirname, '../dist/vue-ssr-client-manifest.json'));
const template = fs.readFileSync(path.resolve(__dirname, '../dist/index.ssr.html'), 'utf-8');
let renderer=createBundleRenderer(serverBundle,{
    runInNewContext: false,
    template,
    clientManifest
})
```

## vue-router配置

### entry-server.js更改
```js
router.push(context.url)   // 路由跳转
router.onReady(() => {   
    const matchedComponents = router.getMatchedComponents(); //获取到当前路由的components
    if (!matchedComponents.length) {
        return reject({ code: 404 });
    }
})
```

### server.js更改
```js
let context = {
    url: ctx.url
};
const ssrStream = renderer.renderToStream(context);  // 生成的是Node流文件，不是html文本
ctx.status = 200;
ctx.type = 'html';
ctx.body = ssrStream;
```

## 参考
[带你五步学会Vue SSR](https://segmentfault.com/a/1190000016637877)