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

最新推荐文章于 2024-12-25 10:19:25 发布

姑老爷呀

最新推荐文章于 2024-12-25 10:19:25 发布

阅读量2.5k

点赞数 3

文章标签： vue.js javascript react.js

本文链接：https://blog.csdn.net/pfourfire/article/details/124840656

版权

本文是《Vue.js 设计与实现》的读书笔记，重点介绍了Vue3的主要模块，如响应系统、渲染器和组件化。讨论了Vue3中的命令式与声明式编程、VDOM与Diff算法、响应式设计、Computed和Watch的原理，并探讨了Vue3的编译优化和SSR相关知识。适合已熟悉Vue3应用的开发者深入理解其内部工作方式。

摘要由CSDN通过智能技术生成

开始

《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 调度功能来实现缓存，非常简洁