这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战
学习 Vue3源码 记录 && 积累! 之前有几篇文章有作 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 出的顺序, 选择性学习记录如下:
7. isModelListener 监听器(是否以某个字符串开头)
// startsWith 是 ES6 提供的方法
MDN | startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。
语法: str.startsWith(searchString[, position])
/// 源码定义
const isModelListener = (key) => key.startsWith('onUpdate:')
/// 使用小栗子：
isModelListener('onUpdate:change') /// true
isModelListener('222onUpdate:change') /// false
9. remove 移除数组的一项
remove() 方法用于数组, 找到给定值，并将其从数组中移除
这里用到的是 splice方法, 比较消耗性能的方法; 学习源码还可以拓展其他的源码阅读: axios源码中则是将要删除的元素重置为 null, 在执行的时候如果为 null 则跳过不执行.
/// 源码定义
const remove = (arr, el) => {
const i = arr.indexOf(el)
if (i > -1) {
arr.splice(i, 1)
}
}
/// 使用
const arr = [1, 2, 3]
remove(arr, 3)
console.log(arr) /// [1, 2]
Vue3 学习实战的几篇小总结:
由此而感
再庞大的人生(Vue3源码)也是由无数的小片段(工具函数)组成的
只有认真的对待(学习)每一个小片段
才算真正认真对待了自己整个人生. 加油!
