Read Vue3 source code, tool functions

Refer to the tutorial materials

Beginners can also understand Vue3 source code in those practical basic tool functions
Vue – next: github.com/vuejs/vue-n…

start

/* object.freeze ({}) The value of the first layer Object, which cannot be modified, is process.env. == 'production' */
export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
  ? Object.freeze({})
  : {}
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []
Copy the code

/* void function, 1; Function (){} */
export const NOOP = () = > {}
Copy the code

/** * Always return false. */
/* always returns FALSE, also easy to compress */
export const NO = () = > false
Copy the code

/* Check if the string starts with on and is not followed by lowercase isOn('onChange'); // true isOn('onchange'); // false isOn('on3change'); // true https://juejin.cn/post/6844903501034684430 */
const onRE = /^on[^a-z]/
export const isOn = (key: string) = > onRE.test(key)
Copy the code

/* check if a string startsWith onUpdate: listener, string function, startsWith, which is a new string method */
export const isModelListener = (key: string) = > key.startsWith('onUpdate:')
Copy the code

/* Object merge method */
export const extend = Object.assign
Copy the code

/* This method encapsulates well. Using splice to remove an item from an array does cost performance. The Axios interceptor fixes this problem by setting the item to null
export const remove = <T>(arr: T[], el: T) = > {
  const i = arr.indexOf(el)
  if (i > -1) {
    arr.splice(i, 1)}}Copy the code

/* Does not own attributes that are not looked up by the prototype chain */
const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (
  val: object,
  key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)
Copy the code

/* Check the array */
export const isArray = Array.isArray
Copy the code

/* ES6 provides a Map data structure. It is a collection of key-value pairs similar to objects, but the range of "keys" is not limited to strings. Values of all types (including objects) can be used as keys. In other words, the Object structure provides string-value mapping, and the Map structure provides value-value mapping, which is a more complete Hash structure implementation. If you need key-value data structures, Map is better than Object. * /
export const isMap = (val: unknown): val is Map<any, any> =>
  toTypeString(val) === '[object Map]'
Copy the code

/* A Set object is similar to an array, but the values of its members are unique
export const isSet = (val: unknown): val is Set<any> =>
  toTypeString(val) === '[object Set]'
  /* Check whether the Date object is mainly this. /* Check whether the Date object is mainly this by using instanceof
export const isDate = (val: unknown): val is Date => val instanceof Date
/* Typeof is used */
export const isFunction = (val: unknown): val is Function= >typeof val === 'function'
Copy the code

/* Check if it is a string */
export const isString = (val: unknown): val is string => typeof val === 'string'
/* Determine if the value of type Symbol is the new primitive type introduced by ES6, representing the unique value */
export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
Typeof null is an object, but if it is an array, it returns TRUE
export constisObject = (val: unknown): val is Record<any, any> => val ! = =null && typeof val === 'object'
  / * determine whether Promise http://liubin.org/promises-book/ Promise mini book mainly asynchronous programming * /
export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
Copy the code

The toTypeString call is a function whose first argument is that this in the function refers to */
export const objectToString = Object.prototype.toString
export const toTypeString = (value: unknown): string= >
  objectToString.call(value)
/* toRawType(' Array'); // 'String' is much more convenient, so you don't have to write long calculations every time */
export const toRawType = (value: unknown): string= > {
  // extract "RawType" from strings like "[object RawType]"
  return toTypeString(value).slice(8, -1)}/* Determine whether a pure object */
export const isPlainObject = (val: unknown): val is object =>
  toTypeString(val) === '[object Object]'
Copy the code

ParseInt (key, 2); parseInt(key, 2); parseInt(key, 2); Convert a binary string to a base 10 number const b = 21; b.toString(2); // Convert base 10 to binary */
export const isIntegerKey = (key: unknown) = >isString(key) && key ! = ='NaN' &&
  key[0]! = =The '-' &&
  ' ' + parseInt(key, 10) === key
Copy the code

  /* isReservedProp('onVnodeBeforeMount'); // true indicates whether the attribute */ is reserved
export const isReservedProp = /*#__PURE__*/ makeMap(
  // the leading comma is intentional so empty string "" is also included
  ',key,ref,' +
    'onVnodeBeforeMount,onVnodeMounted,' +
    'onVnodeBeforeUpdate,onVnodeUpdated,' +
    'onVnodeBeforeUnmount,onVnodeUnmounted'
)
Copy the code

/* The cache function is not quite understood here */
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
}
Copy the code

/* \w represents numbers, uppercase and lowercase letters, and underscores () represent group capture */
const camelizeRE = /-(\w)/g
/ * * *@private* /
/* The camelize function turns the hyphen on-click into onClick */
export const camelize = cacheStringFunction((str: string): string= > {
  return str.replace(camelizeRE, (_, c) = > (c ? c.toUpperCase() : ' '))})/* \B is the boundary, which means that hyphenateRE finds the boundary of the uppercase letter. Hyphenate turns the hump to the hyphen onClick --> on-click */
const hyphenateRE = /\B([A-Z])/g
/ * * *@private* /
/* 
 */
export const hyphenate = cacheStringFunction((str: string) = >
  str.replace(hyphenateRE, '- $1').toLowerCase()
)
Copy the code

/ * * *@private* /
/* The character string starts with an uppercase letter */
export const capitalize = cacheStringFunction(
  (str: string) = > str.charAt(0).toUpperCase() + str.slice(1))/ * * *@private* /
/* click 转为 onClick */
export const toHandlerKey = cacheStringFunction((str: string) = >
  str ? `on${capitalize(str)}` : ` `
)
Copy the code

/* object. is a new syntax in ES6 that compares two values to be exactly the same
// compare whether a value has changed, accounting for NaN.
export const hasChanged = (value: any, oldValue: any): boolean= >
  !Object.is(value, oldValue)
  /* invokeArrayFns () invokeArrayFns () invokeArrayFns (
export const invokeArrayFns = (fns: Function[], arg? : any) = > {
  for (let i = 0; i < fns.length; i++) {
    fns[i](arg)
  }
}
Copy the code

/* Object.defineProperty is an important API value that returns writable when attempting to retrieve an attribute. Enumerable specifies whether configuarable is used in for in. Set gets the property. The default value is FALSE */ except for value, which is undefined
/* The def function defines a key, value, and enumeration that can be deleted, but not changed
export const def = (obj: object, key: string | symbol, value: any) = > {
  Object.defineProperty(obj, key, {
    configurable: true.enumerable: false,
    value
  })
}
Copy the code

/* Number.isNaN(NaN); // true converts to a number */
export const toNumber = (val: any): any= > {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

/* _globalThis is undefined for the first time and the second time is the normal value */
let _globalThis: any
export const getGlobalThis = (): any= > {
  return (
    _globalThis ||
    (_globalThis =
      typeofglobalThis ! = ='undefined'
        ? globalThis
        : typeofself ! = ='undefined'
        ? self
        : typeof window! = ='undefined'
        ? window
        : typeof global! = ='undefined'
        ? global:)} {})Copy the code

conclusion

2021.11.21

Learned some new apis, such as Object.is(), which I didn’t use before

I still don’t understand the cache function very well

Read Vue3 source code, tool functions

Refer to the tutorial materials

start

conclusion

Related Posts

Understand the React Hooks

Js Unicode encoding to UTF-8 encoding

If you don’t know how to roll back code with Git, you should definitely check it out