Mari kita bincangkan tentang 38 fungsi alat di bawah modul kongsi Vue3 (bacaan kod sumber)

Berbanding dengan fungsi utiliti

, fungsi alat

Vue3Vue2 telah banyak berubah secara peribadi, saya rasa ia tercermin terutamanya dalam sintaks es6; [ Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Berbanding dengan kelas alat, tidak terdapat banyak perubahan fungsi, kebanyakannya daripada mereka pada asasnya adalah sama, cuma Terdapat sedikit perbezaan dalam sintaks dan pelaksanaan; >

vue-next/ packages/shared/src/index.ts

• Saya telah memperkenalkan banyak kaedah membaca sebelum ini, tetapi kali ini saya melangkaunya dan mula membaca kod sumber secara langsung ;
Semua fungsi utiliti

: menjana objek yang serupa dengan

, digunakan untuk menentukan sama ada nilai tertentu wujud

: objek kosong

: tatasusunan kosong
• makeMapSet: fungsi kosong
• EMPTY_OBJ: fungsi yang mengembalikan
• EMPTY_ARR
: pertimbangan Sama ada ia adalah peristiwa yang bermula dengan
• NOOP
• : Tentukan rentetan yang bermula dengan NOfalse
• : Gabungkan objekisOnon
: Alih keluar nilai tertentu dalam tatasusunan
• isModelListeneronUpdate: Tentukan sama ada objek mempunyai atribut tertentu
• extend: Tentukan sama ada ia adalah tatasusunan
• remove: Tentukan sama ada ia adalah tatasusunan
• hasOwn
: Tentukan sama ada ia
• isArray
• : Tentukan sama ada ia isMapMap
• : Tentukan sama ada ia isSetSet
• : Tentukan sama ada ia adalah fungsi isDateDate
: Tentukan sama ada ia adalah rentetan
• isRegExpRegExp: Tentukan sama ada ia
• isFunction
: Tentukan sama ada ia objek Singkatan 🎜>
• isString
: Dapatkan jenis objek
• isSymbolSymbol: Tentukan sama ada ia objek biasa
• isObject: Tentukan sama ada ia adalah integer
• isPromisePromise: Tentukan sama ada ia adalah atribut terpelihara
• objectToString: Tentukan sama ada ia adalah arahan terbina dalam Object.prototype.toString
• : Tukar rentetan kepada sarung untatoTypeStringObject.prototype.toString
: Tukar rentetan kepada tanda sempang
• toRawType
: Gunakan huruf besar rentetan pertama
• isPlainObject
: Tukar rentetan kepada pengendalian acara
• isIntegerKeykey
: Tentukan sama ada dua nilai ​​​​sama
• isReservedProp
: Panggil fungsi dalam tatasusunan
• isBuiltInDirective
: Tentukan sifat objek
• camelize
: Tukar rentetan kepada nombor
• hyphenate
: Tukar rentetan kepada nombor
• capitalize
: Dapatkan objek global
• toHandlerKeykey: Kebanyakan ungkapan akses
• hasChanged yang menjana
adalah sama dengan fungsi alat
• , dan pertimbangan jenis data juga dilakukan dengan cara yang sama, kerana invokeArrayFns pengalaman membaca sebelum ini, jadi Saya membacanya dengan pantas kali ini;
• Jika anda mahukan butiran lanjut, anda boleh membaca artikel yang saya tulis sebelum ini: def[Bacaan Dikongsi Kod Sumber] 36 Perkara Praktikal dalam analisis fungsi Alat Modul Dikongsi Kod Sumber Vue2
;
• looseToNumberDan kali ini ia adalah kod sumber langsung, versi
tidak lagi diproses menjadi
• , jadi baca terus toNumber kod sumber;
Permulaan rasmi
• getGlobalThis
• makeMapgenPropsAccessExpprops

kod sumber berada dalam fail Vue2 dalam direktori yang sama dan boleh digunakan terus selepas mengimportnya Vue2 Eksport kata kunci dilaksanakan dengan cara yang sama seperti

;

EMPTY_OBJ & EMPTY_ARR

export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
  ? Object.freeze({})
  : {}
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []

EMPTY_OBJ和EMPTY_ARR的实现方式和Vue2的emptyObject相同，都是使用Object.freeze冻结对象，防止对象被修改；

NOOP

export const NOOP = () => {}

和Vue2的noop实现方式相同，都是一个空函数，移除了入参；

NO

/**
 * Always return false.
 */
export const NO = () => false

和Vue2的no实现方式相同，都是一个返回false的函数，移除了入参；

isOn

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

判断是否是on开头的事件，并且on后面的第一个字符不是小写字母；

isModelListener

export const isModelListener = (key: string) => key.startsWith('onUpdate:')

判断是否是onUpdate:开头的字符串；

参考：startWith

extend

export const extend = Object.assign

直接拥抱es6的Object.assign，Vue2的实现方式是使用for in循环；

remove

export const remove = <T>(arr: T[], el: T) => {
  const i = arr.indexOf(el)
  if (i > -1) {
    arr.splice(i, 1)
  }
}

对比于Vue2删除了一些代码，之前的快速删除最后一个元素的判断不见了；

猜测可能是因为有bug，因为大家都知道Vue2的数组响应式必须使用Array的api，那样操作可能会导致数组响应式失效；

hasOwn

const hasOwnProperty = Object.prototype.hasOwnProperty
export const hasOwn = (
  val: object,
  key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)

使用的是Object.prototype.hasOwnProperty，和Vue2相同；

isArray

export const isArray = Array.isArray

使用的是Array.isArray，和Vue2相同；

isMap & isSet & isDate & isRegExp

export const isMap = (val: unknown): val is Map<any, any> =>
  toTypeString(val) === &#39;[object Map]&#39;
export const isSet = (val: unknown): val is Set<any> =>
  toTypeString(val) === &#39;[object Set]&#39;

export const isDate = (val: unknown): val is Date =>
  toTypeString(val) === &#39;[object Date]&#39;
export const isRegExp = (val: unknown): val is RegExp =>
  toTypeString(val) === &#39;[object RegExp]&#39;

都是使用Object.toString来判断类型，对比于Vue2新增了isMap和isSet和isDate，实现方式没变；

isFunction & isString & isSymbol & isObject

export const isFunction = (val: unknown): val is Function =>
  typeof val === 'function'
export const isString = (val: unknown): val is string => typeof val === 'string'
export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
export const isObject = (val: unknown): val is Record<any, any> =>
  val !== null && typeof val === &#39;object&#39;

和Vue2的实现方式相同，都是使用typeof来判断类型，新增了isSymbol；

isPromise

export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
  return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}

和Vue2对比修改了实现方式，但是判断逻辑没变；

objectToString

export const objectToString = Object.prototype.toString

直接是Object.prototype.toString；

toTypeString

export const toTypeString = (value: unknown): string =>
  objectToString.call(value)

对入参执行Object.prototype.toString；

toRawType

export const toRawType = (value: unknown): string => {
  // extract "RawType" from strings like "[object RawType]"
  return toTypeString(value).slice(8, -1)
}

和Vue2的实现方式相同；

isPlainObject

export const isPlainObject = (val: unknown): val is object =>
  toTypeString(val) === '[object Object]'

和Vue2的实现方式相同；

isIntegerKey

export const isIntegerKey = (key: unknown) =>
  isString(key) &&
  key !== 'NaN' &&
  key[0] !== '-' &&
  '' + parseInt(key, 10) === key

判断一个字符串是不是由一个整数组成的；

isReservedProp

export const isReservedProp = /*#__PURE__*/ makeMap(
  // the leading comma is intentional so empty string "" is also included
  ',key,ref,ref_for,ref_key,' +
    'onVnodeBeforeMount,onVnodeMounted,' +
    'onVnodeBeforeUpdate,onVnodeUpdated,' +
    'onVnodeBeforeUnmount,onVnodeUnmounted'
)

使用makeMap生成一个对象，用于判断入参是否是内部保留的属性；

isBuiltInDirective

export const isBuiltInDirective = /*#__PURE__*/ makeMap(
  'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo'
)

使用makeMap生成一个对象，用于判断入参是否是内置的指令；

cacheStringFunction

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 T
}

同Vue2的cached相同，用于缓存字符串；

camelize

const camelizeRE = /-(\w)/g
/**
 * @private
 */
export const camelize = cacheStringFunction((str: string): string => {
  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
})

将-连接的字符串转换为驼峰式，同Vue2的camelize相同；

capitalize

const hyphenateRE = /\B([A-Z])/g
/**
 * @private
 */
export const hyphenate = cacheStringFunction((str: string) =>
  str.replace(hyphenateRE, '-$1').toLowerCase()
)

将驼峰式字符串转换为-连接的字符串，同Vue2的hyphenate相同；

capitalize

/**
 * @private
 */
export const capitalize = cacheStringFunction(
  (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
)

将字符串首字母大写，同Vue2的capitalize相同；

toHandlerKey

/**
 * @private
 */
export const toHandlerKey = cacheStringFunction((str: string) =>
  str ? `on${capitalize(str)}` : ``
)

将字符串首字母大写并在前面加上on；

hasChanged

// compare whether a value has changed, accounting for NaN.
export const hasChanged = (value: any, oldValue: any): boolean =>
  !Object.is(value, oldValue)

和Vue2相比，移除了polyfill，直接使用Object.is；

invokeArrayFns

export const invokeArrayFns = (fns: Function[], arg?: any) => {
  for (let i = 0; i < fns.length; i++) {
    fns[i](arg)
  }
}

批量调用传递过来的函数列表，如果有参数，会将参数传递给每个函数；

def

export const def = (obj: object, key: string | symbol, value: any) => {
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: false,
    value
  })
}

使用Object.defineProperty定义一个属性，并使这个属性不可枚举；

looseToNumber

/**
 * "123-foo" will be parsed to 123
 * This is used for the .number modifier in v-model
 */
export const looseToNumber = (val: any): any => {
  const n = parseFloat(val)
  return isNaN(n) ? val : n
}

将字符串转换为数字，如果转换失败，返回原字符串；

通过注释知道主要用于v-model的.number修饰符；

toNumber

/**
 * Only conerces number-like strings
 * "123-foo" will be returned as-is
 */
export const toNumber = (val: any): any => {
  const n = isString(val) ? Number(val) : NaN
  return isNaN(n) ? val : n
}

将字符串转换为数字，如果转换失败，返回原数据；

getGlobalThis

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

获取全局对象，根据环境不同返回的对象也不同；

genPropsAccessExp

const identRE = /^[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*$/

export function genPropsAccessExp(name: string) {
  return identRE.test(name)
    ? `__props.${name}`
    : `__props[${JSON.stringify(name)}]`
}

生成props的访问表达式，如果name是合法的标识符，直接返回__props.name，否则返回通过JSON.stringify转换后的__props[name]；

总结

通过这次的源码阅读，我们巩固了一些基础知识，通过对比Vue2的工具函数，我们也了解了Vue3的一些变化；

这些变化个人感觉主要集中在拥抱es6，可以看到放弃ie是多么自由而奔放；

话外题，不知道大家有没有发现MDN上面的浏览器兼容性表格，已经没有了ie的相关信息。

（学习视频分享：vuejs入门教程、编程基础视频）

Atas ialah kandungan terperinci Mari kita bincangkan tentang 38 fungsi alat di bawah modul kongsi Vue3 (bacaan kod sumber). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!