2022 新书《Vue.js 设计与实现》读书笔记

开始

《Vue.js 设计与实现》是 2022 年出版的新书，价格也比较贵，但物有所值，作者肯定是花费了大量的精力来编写。

标题是“设计和实现”，这本书讲的都是 Vue3 的原理，如何设计的，以及如何通过代码实现最基本的功能。所以，看这本书必须要先熟悉 Vue3 应用，否则看起来会很被动。

Vue3 的主要模块

从这本书的目录可以看出

• 响应系统：监听可变数据，数据变化时触发回调函数
• 渲染器：将 VDOM 挂载或更新为真实 DOM ，其中涉及到 diff 算法
• 组件化：支持把一个大型系统拆分为若干组件，形成组件树
• 编译器：把 Vue 模板编译为 JS 代码 （对应 React 中的 JSX）

知识点记录

命令式和声明式

• 命令式 - 关注过程，例如使用 jQuery 进行 DOM 操作
• 声明式 - 关注结果，例如 Vue 模板中绑定事件、使用插值和指令

前端开发中，无论是 jQuery Vue 还是 React ，其实都是两者的结合：用声明式去写 UI 配置，用命令式去做业务逻辑处理。

但 Vue 更倾向于声明式，这主要得益于它的响应式。定义好 data 和模板，直接修改 data 属性值即可，不用执行什么特殊的命令。反观 React 的 setState 就是命令式的，当然 JSX 是声明式的。

从原理上来讲，命令式的性能会更好，因为你可以直接操作基础 API ，简单粗暴。但声明式却更易于扩展和维护，而且性能也不会差。

为何使用 VDOM

同理，VDOM 的性能不会比直接操作 DOM 更好，越基础、越底层的 API 性能越好。

但 VDOM 结合 diff 算法可以在大量 DOM 更新时取得优势，因为此时如果直接进行 DOM 操作会带来极高的复杂度，开发难度很大，维护成本也很高。

响应式的基本设计思路

• 使用 Proxy 监听数据属性的 get set
• get 时记录 effectFn 到一个 WeakMap （按属性分别记录）—— 所以，想实现响应式，要先执行一次 effectFn ，即 touch
• set 时找到 Map 中所有的 effectFn ，然后分别触发

bucket: WeakMap {
    target1: Map {
        key1: Set[
            fn1,
            fn2,
            fn3
        ],
        key1: Set[ ... ]
    },
    target2: Map { ... }
} 

还有很多其他的情况，如：三元表达式、嵌套 effectFn 、循环调用等，书中都做了详细的讲解。

computed 基本原理

响应式支持自行配置“执行调度”功能，可以传入 lazy 这样 effectFn 不会立刻触发，而需要手动执行。

effect(
 () => { console.log(obj.foo) },
 {
     lazy: true // obj.foo 被修改时，函数不会被触发
 }
) 

Vue 中的 computed 也是这样被动触发的，不是主动执行的。可以这样定义 computed

function computed(getter) {
    const effectFn = effect(getter, { lazy: true })
    
    const obj = {
        get value() {
            return effectFn() // 当读取 .value 时再执行 effctFn
        }
    }
    return obj
} 

computed 另一个重要功能是缓存计算结果，可以结合 scheduler 调度功能来实现缓存，非常简洁

function computed(