vue 设计与实现

《vue 设计与实现》阅读笔记

• 命令式和声明式

1. 命令式(jquery)关注过程、声明式(vue)关注结果
2. 声明式的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗

• 框架设计核心

1. 开发体验：提供友好的警告信息
2. 代码体积：分环境输出资源
3. 良好的 tree-shaking：（模块必须是 esm；副作用；）
4. 特性开关
5. 错误处理
6. 良好的 ts 类型支持

• 响应式系统

1. 副作用函数：会删除副作用的函数

let val = 1
function effect() {
    val = 2 // 修改全局变量，产生副作用
}

2. 响应式的基本实现

const bucket = new Set()
const data = {
    text: 'hello world',
}
const obj = new Proxy(data, {
    get(target, key) {
        bucket.add(effect)
        return target[key]
    },
    set(target, key, newVal) {
        target[key] = newVal
        bucket.forEach((fn) => fn())
        return true
    },
})

function effect() {
    document.body.innerText = obj.text
}
effect()
setTimeout(() => {
    obj.text = 'hello vue3'
}, 1000)