Vue3 工具函数源码阅读

本篇是源码阅读的第三期，Vue3 工具函数

Vue 版本 —— "version": "3.2.31"

如果单纯阅读工具函数，可以不用下载 Vue3 源码，也不需要调试，但是为了以后阅读关键源码，这里先记录下如何调试 Vue 源码。

Vue3 源码调试

有兴趣的话可以先阅读下贡献指南

如下流程就是按照指南中的步骤进行的。

安装包管理工具 ni
下载源码 git clone git@github.com:vuejs/core.git
在 package.json 文件中，修改 dev 脚本 "dev": "node scripts/dev.js --sourcemap"
启动项目 nr dev

shared 工具函数源码

本地代码阅读以 index.ts 文件中的代码为主

代码位置： packages\shared\src\index.ts

总体来说代码并不复杂,因此主要记录阅读中存在的问题和疑惑.

Object.freeze 为什么在开发环境使用?

export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
  ? Object.freeze({})
  : {}
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []

缓存和字符串相关的函数

const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
    const cache: Record<string, string> = Object.create(null)
    return ((str: string) => {
        const hit = cache[str]
        return hit || (cache[str] = fn(str))
    }) as any
}

从近两期源码阅读发现,有很多地方都用到了数据类型判断,说明这是个比较重要的知识点. 此外,还有 JS 原生的 Object API 也多处使用了,需要再好好总结一番

TODO:

js 数据类型判断总结
Object API 总结

【第2期】Vue3 工具函数源码阅读

Vue3 工具函数源码阅读

Vue3 源码调试

shared 工具函数源码