高级前端-Vue源码分析

1. Vue的响应式原理

let nextTick = (cb) => Promise.resolve().then(cb)
let flushJobs = []
function queueJob(dep) {
    flushJobs.push(dep)
    // 微任务，最后执行，真正执行数据操作函数
    nextTick(flushJobs)
}
function flushJobs(job) {
    // 拿出队列中的所有job，从第一个开始往后执行
    job.update()
}

Class Dep {
    deps = new Set()
    depend() {
        this.deps.add(window.target) // window.target就是当前数据的一个watcher
    },
    notify() {
        this.deps.forEach(dep => {
            dep()
            // queueJob(dep) 通知更新的时候，把所有依赖(watcher)放入到更新队列
        })
    }
}

let ref = initValue => {
let value = initValue
let dep = new Dep
Object.defineProperty({}, 'prop', {
    set: (newValue) => {
        this.value = newValue
        dep.notify()
    },
    get: () => {
        return this.value
        dep.depend()
    }
})
}

2. Vue异步更新原理

为了解决每次修改一个数据，都要重新渲染页面影响性能的一种解决方案

3. nextTick

4. Virtual Dom (js虚拟的dom，是个js对象，为了更好的操作html的dom对象)

5. Diff算法 (通过diff算法，最精力度的找到需要修改的dom节点，首先层级对比，然后组件类型对比，一个列表比对的时候通过key，可以更快的找到dom)

6. Object.defineProperty的局限性，不能监听到添加和删除新属性的变化，所以vue3.0提供了proxy

7. Vue3.0 提供了composition API

8. Computed和watch的源码分析