初学者也能看懂的 Vue3 源码中那些实用的基础工具函数

1. 如何学习 JavaScript 基础知识，会推荐很多学习资料2. 如何学习调试 vue 3 源码3. 如何学习源码中优秀代码和思想，投入到自己的项目中4. Vue 3 源码 shared 模块中的几十个实用工具函数5. 我的一些经验分享

node -v# v14.16.0# 全局安装 yarn
# 推荐克隆我的项目git clone https://github.com/lxchuan12/vue-next-analysis.gitcd vue-next-analysis/vue-next
# 或者克隆官方项目git clone https://github.com/vuejs/vue-next.gitcd vue-next
npm install --global yarnyarn # install the dependencies of the projectyarn build

// package.json{    "version": "3.2.1",    "scripts": {        "dev:sourcemap": "node scripts/dev.js --sourcemap"    }}

// vue-next/examples/index.html<script src="../../packages/vue/dist/vue.global.js"></script><script>    const Counter = {        data() {            return {                counter: 0            }        }    }
    Vue.createApp(Counter).mount('#counter')</script>

/** * List of @babel/parser plugins that are used 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 https://babeljs.io/docs/en/next/babel-parser#plugins */const babelParserDefaultPlugins = [    'bigInt',    'optionalChaining',    'nullishCoalescingOperator'];

const EMPTY_OBJ = (process.env.NODE_ENV !== 'production')    ? Object.freeze({})    : {};
// 例子：// Object.freeze 是 冻结对象// 冻结的对象最外层无法修改。const EMPTY_OBJ_1 = Object.freeze({});EMPTY_OBJ_1.name = '若川';console.log(EMPTY_OBJ_1.name); // undefined
const EMPTY_OBJ_2 = Object.freeze({ props: { mp: '若川视野' } });EMPTY_OBJ_2.props.name = '若川';EMPTY_OBJ_2.props2 = 'props2';console.log(EMPTY_OBJ_2.props.name); // '若川'console.log(EMPTY_OBJ_2.props2); // undefinedconsole.log(EMPTY_OBJ_2);/** *  * {  *  props: {     mp: "若川视野",     name: "若川"    } * } * */

const EMPTY_ARR = (process.env.NODE_ENV !== 'production') ? Object.freeze([]) : [];
// 例子：EMPTY_ARR.push(1) // 报错，也就是为啥生产环境还是用 []EMPTY_ARR.length = 3;console.log(EMPTY_ARR.length); // 0

const NOOP = () => { };
// 很多库的源码中都有这样的定义函数，比如 jQuery、underscore、lodash 等// 使用场景：1. 方便判断， 2. 方便压缩// 1. 比如：const instance = {    render: NOOP};
// 条件const dev = true;if(dev){    instance.render = function(){        console.log('render');    }}
// 可以用作判断。if(instance.render === NOOP){ console.log('i');}// 2. 再比如：// 方便压缩代码// 如果是 function(){} ，不方便压缩代码

/** * Always return false. */const NO = () => false;
// 除了压缩代码的好处外。// 一直返回 false

const onRE = /^on[^a-z]/;const isOn = (key) => onRE.test(key);
// 例子：isOn('onChange'); // trueisOn('onchange'); // falseisOn('on3change'); // true

const isModelListener = (key) => key.startsWith('onUpdate:');
// 例子：isModelListener('onUpdate:change'); // trueisModelListener('1onUpdate:change'); // false// startsWith 是 ES6 提供的方法

const extend = Object.assign;
// 例子：const data = { name: '若川' };const data2 = extend(data, { mp: '若川视野', name: '是若川啊' });console.log(data); // { name: "是若川啊", mp: "若川视野" }console.log(data2); // { name: "是若川啊", mp: "若川视野" }console.log(data === data2); // true

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]

// 代码有删减// 声明this.handlers = [];
// 移除if (this.handlers[id]) {    this.handlers[id] = null;}
// 执行if (h !== null) {    fn(h);}

const hasOwnProperty = Object.prototype.hasOwnProperty;const hasOwn = (val, key) => hasOwnProperty.call(val, key);
// 例子：
// 特别提醒：__proto__ 是浏览器实现的原型写法，后面还会用到// 现在已经有提供好几个原型相关的API// Object.getPrototypeOf// Object.setPrototypeOf// Object.isPrototypeOf
// .call 则是函数里 this 显示指定以为第一个参数，并执行函数。
hasOwn({__proto__: { a: 1 }}, 'a') // falsehasOwn({ a: undefined }, 'a') // truehasOwn({}, 'a') // falsehasOwn({}, 'hasOwnProperty') // falsehasOwn({}, 'toString') // false// 是自己的本身拥有的属性，不是通过原型链向上查找的。

const isArray = Array.isArray;
isArray([]); // trueconst fakeArr = { __proto__: Array.prototype, length: 0 };isArray(fakeArr); // falsefakeArr instanceof Array; // true// 所以 instanceof 这种情况 不准确

const isMap = (val) => toTypeString(val) === '[object Map]';
// 例子：const map = new Map();const o = { p: 'Hello World' };
map.set(o, 'content');map.get(o); // 'content'isMap(map); // true

const isSet = (val) => toTypeString(val) === '[object Set]';
// 例子：const set = new Set();isSet(set); // true

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';
// 例子：isString('') // true

const isSymbol = (val) => typeof val === 'symbol';
// 例子：let s = Symbol();
typeof s;// "symbol"// Symbol 是函数，不需要用 new 调用。

const isObject = (val) => val !== null && typeof val === 'object';
// 例子：isObject(null); // falseisObject({name: '若川'}); // true// 判断不为 null 的原因是 typeof null 其实 是 object

const isPromise = (val) => {    return isObject(val) && isFunction(val.then) && isFunction(val.catch);};
// 判断是不是Promise对象const p1 = new Promise(function(resolve, reject){  resolve('若川');});isPromise(p1); // true
// promise 对于初学者来说可能比较难理解。但是重点内容，JS异步编程，要着重掌握。// 现在 web 开发 Promise 和 async await 等非常常用。

const objectToString = Object.prototype.toString;
// 对象转字符串

const toTypeString = (value) => objectToString.call(value);
// call 是一个函数，第一个参数是 执行函数里面 this 指向。// 通过这个能获得 类似  "[object String]" 其中 String 是根据类型变化的

const toRawType = (value) => {    // extract "RawType" from strings like "[object RawType]"    return toTypeString(value).slice(8, -1);};
// 截取到toRawType('');  'String'

// typeof 返回值目前有以下8种 'undefined''object''boolean''number''bigint''string''symobl''function'

const objectToString = Object.prototype.toString;const toTypeString = (value) => objectToString.call(value);// const isPlainObject = (val) => toTypeString(val) === '[object Object]';
// 前文中 有 isObject 判断是不是对象了。// isPlainObject 这个函数在很多源码里都有，比如 jQuery 源码和 lodash 源码等，具体实现不一样// 上文的 isObject([]) 也是 true ，因为 type [] 为 'object'// 而 isPlainObject([]) 则是falseconst Ctor = function(){    this.name = '我是构造函数';}isPlainObject({}); // trueisPlainObject(new Ctor()); // true

const isIntegerKey = (key) => isString(key) &&    key !== 'NaN' &&    key[0] !== '-' &&    '' + parseInt(key, 10) === key;
// 例子:isIntegerKey('a'); // falseisIntegerKey('0'); // trueisIntegerKey('011'); // falseisIntegerKey('11'); // true// 其中 parseInt 第二个参数是进制。// 字符串能用数组取值的形式取值。//  还有一个 charAt 函数，但不常用 'abc'.charAt(0) // 'a'// charAt 与数组形式不同的是 取不到值会返回空字符串''，数组形式取值取不到则是 undefined

/** * Make a map and return a function for checking if a key * is in that map. * IMPORTANT: all calls of this function must be prefixed with * \/\*#\_\_PURE\_\_\*\/ * So that rollup can tree-shake them if necessary. */function makeMap(str, expectsLowerCase) {    const map = Object.create(null);    const list = str.split(',');    for (let i = 0; i < list.length; i++) {        map[list[i]] = true;    }    return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];}const isReservedProp = /*#__PURE__*/ makeMap(// the leading comma is intentional so empty string "" is also included',key,ref,' +    'onVnodeBeforeMount,onVnodeMounted,' +    'onVnodeBeforeUpdate,onVnodeUpdated,' +    'onVnodeBeforeUnmount,onVnodeUnmounted');
// 保留的属性isReservedProp('key'); // trueisReservedProp('ref'); // trueisReservedProp('onVnodeBeforeMount'); // trueisReservedProp('onVnodeMounted'); // trueisReservedProp('onVnodeBeforeUpdate'); // trueisReservedProp('onVnodeUpdated'); // trueisReservedProp('onVnodeBeforeUnmount'); // trueisReservedProp('onVnodeUnmounted'); // true

const cacheStringFunction = (fn) => {    const cache = Object.create(null);    return ((str) => {        const hit = cache[str];        return hit || (cache[str] = fn(str));    });};

var getSingle = function(fn){ // 获取单例    var result;    return function(){        return result || (result = fn.apply(this, arguments));    }};

// \w 是 0-9a-zA-Z_ 数字 大小写字母和下划线组成// () 小括号是 分组捕获const camelizeRE = /-(\w)/g;/** * @private */// 连字符 - 转驼峰  on-click => onClickconst camelize = cacheStringFunction((str) => {    return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));});// \B 是指 非 \b 单词边界。const hyphenateRE = /\B([A-Z])/g;/** * @private */
const hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, '-$1').toLowerCase());
// 举例：onClick => on-clickconst hyphenateResult = hyphenate('onClick');console.log('hyphenateResult', hyphenateResult); // 'on-click'
/** * @private */// 首字母转大写const capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));/** * @private */// click => onClickconst toHandlerKey = cacheStringFunction((str) => (str ? `on${capitalize(str)}` : ``));
const result = toHandlerKey('click');console.log(result, 'result'); // 'onClick'

const hasChanged = (value, oldValue) => !Object.is(value, oldValue);

// compare whether a value has changed, accounting for NaN.const hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);// 例子：// 认为 NaN 是不变的hasChanged(NaN, NaN); // falsehasChanged(1, 1); // falsehasChanged(1, 2); // truehasChanged(+0, -0); // false// Obect.is 认为 +0 和 -0 不是同一个值Object.is(+0, -0); // false           // Object.is 认为  NaN 和 本身 相比 是同一个值Object.is(NaN, NaN); // true// 场景// watch 监测值是不是变化了
// (value === value || oldValue === oldValue)// 为什么会有这句 因为要判断 NaN 。认为 NaN 是不变的。因为 NaN === NaN 为 false

Object.is('若川', '若川'); // trueObject.is({},{}); // falseObject.is(+0, -0); // false+0 === -0; // trueObject.is(NaN, NaN); // trueNaN === NaN; // false

Object.defineProperty(Object, 'is', {    value: function() {x, y} {        if (x === y) {           // 针对+0不等于-0的情况           return x !== 0 || 1 / x === 1 / y;        }        // 针对 NaN的情况        return x !== x && y !== y;    },    configurable: true,    enumerable: false,    writable: true});

const invokeArrayFns = (fns, arg) => {    for (let i = 0; i < fns.length; i++) {        fns[i](arg);    }};
// 例子：const arr = [    function(val){        console.log(val + '的博客地址是：https://lxchuan12.gitee.io');    },    function(val){        console.log('百度搜索 若川 可以找到' + val);    },    function(val){        console.log('微信搜索 若川视野 可以找到关注' + val);    },]invokeArrayFns(arr, '我');

const def = (obj, key, value) => {    Object.defineProperty(obj, key, {        configurable: true,        enumerable: false,        value    });};

var person = {};person.legs = 2;

var person = {};Object.defineProperty(person, 'legs', {    value: 2,    writable: true,    configurable: true,    enumerable: true});

var person = {};Object.defineProperty(person, 'legs', {    set:function(v) {        return this.value = v;    },    get: function(v) {        return this.value;    },    configurable: true,    enumerable: true});person.legs = 2;

var person = {};Object.defineProperty(person, 'heads', {value: 1});person.heads = 0; // 0person.heads; // 1  (改不了)delete person.heads; // falseperson.heads // 1 (删不掉)

const toNumber = (val) => {    const n = parseFloat(val);    return isNaN(n) ? val : n;};
toNumber('111'); // 111toNumber('a111'); // 'a111'parseFloat('a111'); // NaNisNaN(NaN); // true

Number.isNaN('a')  // falseNumber.isNaN(NaN); // true

let _globalThis;const getGlobalThis = () => {    return (_globalThis ||        (_globalThis =            typeof globalThis !== 'undefined'                ? globalThis                : typeof self !== 'undefined'                    ? self                    : typeof window !== 'undefined'                        ? window                        : typeof global !== 'undefined'                            ? global                            : {}));};