女生体重标准【源码】vue3⼯具函数源码解读
学习笔记
源码解读第⼆期： 知其然，知其所以然
这个解读核⼼主要是shared模块，
对应的⽂件路径是：vue-next/packages/shared/src/index.ts
也可以⽤github1s访问，速度更快github1spackages/shared/src/index.ts
打包构建
按照贡献指南 的⽅法打包，把ts 转成js
打包前注意事项：
Node.js 版本是 10+
火箭军工程大学yarn 的版本是 1.x Yarn 1.x。
node -v
# v14.16.0
# 全局安装 yarn
# 克隆项⽬
git clone /vuejs/vue-next.git
cd vue-next
yanr
yarn build
执⾏完以上操作以后可以得到：vue -next/packages/shared/dist/shared.esm-bundler.js，⽂件也就是纯js⽂件。
⽣成 sourcemap 调试源码
调试看源码可以⼀步步感受过程，所以学习如何⽣成sourcemap ，如何配置就很重要，虽然(贡献指南⾥⾯描述了)[]，但是写的仔细点快记在⼩本本上： 在vue-next/package.json追加 "dev:sourcemap": "node scripts/dev.js --sourcemap"，yarn dev:sourcemap执⾏，即可⽣成sourcemap，或者直接 build。
// package.json
{
"version": "3.2.1",处女男和摩羯女
"scripts": {
"dev:sourcemap": "node scripts/dev.js --sourcemap"
}
}
其中packages/vue/dist/vue.global.js.map 就是sourcemap⽂件了。
⼯具函数解读
1. babelParrDefaultPlugins babel 解析默认插件
/**
* List of @babel/parr plugins that are ud for template expression
* transforms and SFC script transforms. By default we enable proposals slated
* for ES2020. This will need to be updated as the spec moves forward.
* Full list at babeljs.io/docs/en/next/babel-parr#plugins
*/
const babelParrDefaultPlugins = [
'bigInt',
'optionalChaining',
'nullishCoalescingOperator'
];
2. EMPTY_OBJ 空对象
const EMPTY_OBJ = (v.NODE_ENV !== 'production')
Object.freeze({})
: {};
Object.freeze 是 冻结对象, 冻结的对象最外层⽆法修改。
当为production的时候返回fal 其余true6 ,
3. EMPTY_ARR 空数组
const EMPTY_ARR = (v.NODE_ENV !== 'production') ? Object.freeze([]) : [];
// 例⼦：
EMPTY_ARR.push(1) // 报错，也就是为啥⽣产环境还是⽤ []
EMPTY_ARR.length = 3;
console.log(EMPTY_ARR.length); // 0
4. NOOP 空函数果酱怎么做
const NOOP = () => { };
// 很多库的源码中都有这样的定义函数，⽐如 jQuery、underscore、lodash 等
// 使⽤场景：1. ⽅便判断， 2. ⽅便压缩
5. 永远返回fal 的函数NO
const NO = () => fal;
6. isOn 判断字符串是不是 on 开头, 并且 on 后⾸字母是不是⼩写字母
const onRE = /^on[^a-z]/;
const isOn = (key) => st(key);
console.log(isOn('onclick')) //fal
console.log(isOn('onClick')) //true
console.log(isOn('on..123')) //true
^on是以on开头 $是结尾，[^a-z]表⽰不是a到z的⼩写字母
7. isModelListener 监听器
const isModelListener = (key) => key.startsWith('onUpdate:');
字⾯解读，判断key这个字符串是不是以onUpdate开头的
startsWith ES6 中的⽅法
8. extend 继承 合并
const extend = Object.assign;
// 相同属性会被覆盖,
const obj1 = { name: dyy }
const obj2 = { name: huahua, value, ‘1岁’}
console.log(extend(obj1,obj2)) // { name: huahua, value, ‘1岁’}
9. remove 移除数组中指定元素
const remove = (arr, el) => {
const i = arr.indexOf(el);
if (i > -1) {
arr.splice(i, 1);
}
};
// 例⼦：
const arr = [1, 2, 3，4，5];
remove(arr, 4);
console.log(arr); // [1, 2，3，5]
字⾯意思：判断数组中有没有el 这个元素，如果有就删除
splice删除数组中的⼀项，其他的都要移动位置，很耗性能
所以也可以⽤这个思想，把删除的元素设为 null，在使⽤执⾏时为 null 的不执⾏，也可达到相同的效果。
10. hasOwn 判断是否是⾃⼰本⾝所拥有的属性
const hasOwnProperty = Object.prototype.hasOwnProperty;
const hasOwn = (val, key) => hasOwnProperty.call(val, key);
⽤原型的API：hasOwnProperty来判断 key 是否是 obj 本⾝的属性。
__proto__是浏览器实现的原型写法
+.call则是函数⾥this显⽰指定以为第⼀个参数，并执⾏函数。11. is XXX 判断某种类型
// 判断是否为数组
const isArray = Array.isArray;
isArray([]); // true
const fakeArr = { __proto__: Array.prototype, length: 0 };
isArray(fakeArr); // fal
fakeArr instanceof Array; // true
// 所以 instanceof 这种情况不准确
const isMap = (val) => toTypeString(val) === '[object Map]';
// 例⼦：
const map = new Map();
const o = { p: 'aa' };
map.t(o, 'bb');
<(o); // 'bb'
isMap(map); // true
tf眼影// 判断是否 Set 对象
const isSet = (val) => toTypeString(val) === '[object Set]';
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯⼀的，没有重复的值。
// 判断是否 Date 对象
const isDate = (val) => val instanceof Date;
// 例⼦：
isDate(new Date()); // true
// `instanceof` 操作符左边是右边的实例。但不是很准，但⼀般够⽤了。原理是根据原型链向上查找的。
isDate({__proto__ : new Date()); // true
// 实际上是应该是 Object 才对。
// 所以⽤ instanceof 判断数组也不准确。
// 再⽐如
陈仲子({__proto__: [] }) instanceof Array; // true
// 实际上是对象。
// 所以⽤数组本⾝提供的⽅法 Array.isArray 是⽐较准确的。
// 判断是否函数
const isFunction = (val) => typeof val === 'function';
// 判断数组有多种⽅法，但这个是⽐较常⽤也相对兼容性好的。
// 判断是否字符串
const isString = (val) => typeof val === 'string';
// 判断是否 Symbol
const isSymbol = (val) => typeof val === 'symbol';
琉璃山药// 原始数据类型Symbol，表⽰独⼀⽆⼆的值。
//Symbol是函数，不需要new 调⽤
/
/ 判断是否对象（不包括 null）
const isObject = (val) => val !== null && typeof val === 'object';
// 例⼦：
isObject(null); // fal
isObject({name: '若川'}); // true
// 判断不为 null 的原因是 typeof null 其实是 object
// 判断是否 Promi
const isPromi = (val) => {
return isObject(val) && isFunction(val.then) && isFunction(val.catch);
};
is被称为类型谓词，⽤来判断⼀个变量属于某个接⼝或类型
>干的组词
