Vue3源码学习-工具函数utils(一)再庞大的人生(Vue3源码)也是由无数的小片段(工具函数)组成的只有认真的对

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

前言

记录 && 积累! 之前有几篇文章有作 Vue3的一些变更学习总结的开始, 请直接转到文末Vue3 小结目录

本文通过学习川哥的源码共读来记录学习 Vue3 源码的一些笔记. -Vue3 工具函数(代码片段)

源码 & 文档

Vue3 源码仓库 vue-next: github.com/vuejs/vue-n…
Vue3 工具函数源码仓库: vue-next/packages/shared/src/index.ts 如果访问较慢也可访问这个(在线 Vscode 打开源码): github1s.com/vuejs/vue-n…

打包源码 TS --> JS

源码中 index.ts 为方便阅读, 可以克隆下源码, 打包成 .js 进行查看

git clone git@github.com:vuejs/vue-next.git
cd vue-next
# 安装依赖，然后直接打包
yarn
yarn build

打包后的代码, 工具函数则在文件 vue-next/packages/shared/dist/shared.esm-bundler.js 中, 即可开始学习了

Vue3 工具函数

根据源码中的 export 出的顺序, 选择性学习记录如下:

2-3. EMPTY_OBJ 空对象 | EMPTY_ARR 空数组

// Object.freeze() 冻结对象 // 冻结的对象, 最外层不能修改，里面的可以修改. 即浅冻结

在开发环境下, 修改冻结的 EMPTY_OBJ 将抛出错误; 生产环境下不需要错误信息

/// 空对象
const EMPTY_OBJ = process.env.NODE_ENV !== 'production' ? Object.freeze({}) : {}
/// 空数组
const EMPTY_ARR = process.env.NODE_ENV !== 'production' ? Object.freeze([]) : []

const EMPTY_OBJ_1 = Object.freeze({})
EMPTY_OBJ_1.name = 'xn213'
console.log(EMPTY_OBJ_1.name) // undefined

const EMPTY_OBJ_2 = Object.freeze({ props: { mp: 'xn213' } })
EMPTY_OBJ_2.props.name = '213'
EMPTY_OBJ_2.props2 = 'props2'
console.log(EMPTY_OBJ_2.props.name) // '213'
console.log(EMPTY_OBJ_2.props2) // undefined
console.log(EMPTY_OBJ_2)
/**
 * {
 *    props: {
 *      mp: 'xn213',
 *      name: '213
 *    }
 * }
 */

6. isOn() 判断是否以 `on` 开头,

到这里有没有熟悉了, 原来开发中用到的在源码里都有体现:

isOn() 判断字符串是否以 on 开头, 并且 on 后面跟着的不是小写字母

/// 注意这个正则里的两个 ^, 第一个 ^ 为以什么开头, 而第二个表示非, 这里表示非小写字母

const onRE = /^on[^a-z]/
const isOn = (key) => onRE.test(key)

isOn('onChange') // true
isOn('onchange') // false
isOn('on2hange') // true

Vue3 学习实战的几篇小总结:

感慨

再庞大的人生也是由无数的小片段组成的

只有认真的对待每一个小片段

才算真正认真对待了自己整个人生

Vue3源码学习-工具函数utils(一)

前言