手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法

Virtual DOM

虚拟DOM是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫Virtual DOM。

创建虚拟DOM的开销要比真实DOM小很多

为什么要使用Virtual DOM

手动操作DOM比较麻烦，还要考虑浏览器兼容性问题，随着项目的复杂，DOM操作复杂度提升
为了简化DOM复杂操作出现了MVVM框架，MVVM框架解决了视图和状态的同步问题
为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题，于是出现了Virtual DOM
Virtual DOM的好处是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部将弄清楚如何有效的（Diff）更新DOM
参考github上Virtual DOM的描述
- 虚拟DOM可以维护程序的状态，跟踪上一次状态
- 通过比较前后两次状态的差异更新真实DOM

Virtual DOM的作用

维护视图和状态的关系，使用虚拟DOM可以记录上一次状态的变化，只更新状态变化的位置
复杂视图情况下提升渲染性能
除了渲染DOM以外，还可以实现SSR，原生应用，小程序等
Virtual DOM 开源库
- Snabbdom
  - Vue2.x内部使用的Virtual DOM就是改造的Snabbdom
  - 大约200SLOC（single line of code）
  - 通过模块可扩展
  - 源码使用TypeScript开发
  - 最快的Virtual DOM之一
- Virtual-dom
  - 最早的虚拟DOM的开源库

函数重载

函数重载指的是参数个数或类型不同的函数，JavaScript没有重载的概念，TypeScript通过代码调整参数实现重载

function add (a, b) {
    return a + b
}
// 由于JS没有函数重载的概念，所以后声明的同名函数会覆盖上一个函数
// 如果是支持重载的语言，可以定义两个同名的函数，通过参数个数或类型的不同来区分两个函数
// 
function add (a, b, c) {
    return a + b + c
}

Diff算法

Snabbdom中path(oldVnode, newVnode)用来比较新旧节点，如果新的Vnode有子节点，判断子节点是否变化，
判断子节点的过程就是Diff算法，Diff过程只进行同层级别比较

观察者模式

vue的响应式机制运用了观察者模式，观察者模式和发布订阅模式的区别是没有事件中心，
只有发布者和订阅者，同时发布者需要知道订阅者的存在
观察者模式是由具体目标调度，当事件触发时发布者会去调用观察者的方法，所以发布者与订阅者是相互依赖的
发布订阅模式由统一的调度中心（事件中心）调用，发布者与订阅者不需要知道对方的存在

观察者（订阅者）-- watcher
- update() 当事件发生时需要做的事情
目标（发布者） -- dep
- subs数组：存储所有观察者
- addSub()：添加观察者
- notify()：当事件发生时，调用所有观察者的update()方法

// 订阅者
class Dep {
    constructor () {
        // 记录所有订阅者
        this.subs = []
    }
    addSub (sub) {
        // 判断观察者是否存在，并且具有update方法
        if (sub && sub.update) {
            this.subs.push(sub)
        }
    }
    notify () {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}
// 观察者
class Watcher {
    update () {
        console.log('update')
    }
}

let dep = new Dep()
let watch = new Watcher()
dep.addSub(watch)
dep.notify()