本文章共5314字，預計閱讀時間5-15分鐘。
前言
不知不覺Vue-next的版本已經來到了3.1.2，最近對照著原始碼學習Vue3的全域性Api，邊學習邊整理了下來，希望可以和大家一起進步。
我們以官方定義、用法、原始碼淺析三個維度來一起看看它們。
下文是關於Vue3全域性Api的內容，大家如果有更好的理解和想法，可以在評論區留言，每條我都會回覆~
全域性API
全域性API是直接在Vue上掛載方法，在Vue中，全域性API一共有13個。分別是：
- createapp 返回一個提供應用上下文的應用例項；
- h 返回一個”虛擬節點；
- definecomponent 返回options的物件，在TS下，會給予元件正確的引數型別推斷；
- defineasynccomponent 建立一個只有在需要時才會載入的非同步元件；
- resolvecomponent 按傳入的元件名稱解析 component；
- resolvedynamiccomponent 返回已解析的Component或新建的VNode；
- resolvedirective 通過其名稱解析一個 directive;
- withdirectives 返回一個包含應用指令的 VNode;
- createrenderer 跨平臺自定義渲染;
- nexttick 是將回撥函式延遲在下一次dom更新資料後呼叫;
- mergeprops 將包含 VNode prop 的多個物件合併為一個單獨的物件;
- usecssmodule 訪問 CSS 模組;
- version 檢視已安裝的 Vue 的版本號;
createApp
官方定義：返回一個提供應用上下文的應用例項。應用例項掛載的整個元件樹共享同一個上下文。
顧名思義，CreateApp 作為 vue 的啟動函式，返回一個應用例項，每個 Vue 應用程式都首先使用以下函式建立一個新的應用程式例項，應用程式例項公開的大多數方法都返回相同的例項，可以鏈式呼叫。例如：
Vue.createApp({}).component('SearchInput', SearchInputComponent)
用法
-
第一個引數: 接收一個根元件選項
-
第二個引數: 將根 prop 傳遞給應用程式
// 用法示例
import { createApp, h, nextTick } from 'vue'
const app = createApp({
data() {
return {
...
}
},
methods: {...},
computed: {...}
...
},
{ username: 'Evan' })
原始碼淺析
GitHub地址：
- createApp()： 56行 - 102行內容 [1]
- ensureRenderer()：35 行- 37行內容 [2]
- createRenderer（）：419 行- 424行內容 [3]
- baseCreateRenderer()：448 行- 2418行 [4]
- app._component：174行[5]
// 原始碼位置上方[1]
export const createApp = ((...args) => {
// 使用ensureRenderer().createApp() 來建立 app 物件
// 原始碼位置上方[2]
// -> ensureRenderer方法呼叫了來自runtime-core的createRenderer
// 原始碼位置上方[3]
// -> createRenderer(HostNode, HostElement),兩個通用引數HostNode(主機環境中的節點)和HostElement(宿主環境中的元素)，對應於宿主環境。
// -> reateRenderer(使用（可選的）選項建立一個 Renderer 例項。),該方法返回了 baseCreateRenderer
// 原始碼位置上方[4]
// -> baseCreateRenderer方法最終返回 render hydrate createApp三個函式，生成的 render 傳給 createAppAPI ，hydrate 為可選引數，ssr 的場景下會用到；
const app = ensureRenderer().createApp(...args)
if (__DEV__) {
// DEV環境下，用於元件名稱驗證是否是原生標籤或者svg屬性標籤
injectNativeTagCheck(app)
// DEV環境下，檢查CompilerOptions如果有已棄用的屬性，顯示警告
injectCompilerOptionsCheck(app)
}
const { mount } = app
// 從建立的app物件中解構獲取mount，改寫mount方法後 返回app例項
app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
// container 是真實的 DOM 元素,normalizeContainer方法使用document.querySelector處理傳入的<containerOrSelector>引數，如果在DEV環境下元素不存在 或者 元素為影子DOM並且mode狀態為closed，則返回相應的警告
const container = normalizeContainer(containerOrSelector)
// 如果不是真實的DOM元素則 return
if (!container) return
// 這裡的app._component 其實就是全域性API的createApp的第一個引數，原始碼位置在上方[5]
const component = app._component
// component不是函式 並且 沒有不包含render、template
if (!isFunction(component) && !component.render && !component.template) {
// 不安全的情況
// 原因:可能在dom模板中執行JS表示式。
// 使用者必須確保內dom模板是可信的。如果它是
// 模板不應該包含任何使用者資料。
// 使用 DOM的innerHTML作為component.template 內容
component.template = container.innerHTML
// 2.掛載前檢查，獲得元素屬性的集合遍歷如果name不是v-cloak狀態 並且屬性名稱包含v-、:、@ ，會給出vue文件連結提示
if (__COMPAT__ && __DEV__) {
for (let i = 0; i < container.attributes.length; i++) {
const attr = container.attributes[i]
if (attr.name !== 'v-cloak' && /^(v-|:|@)/.test(attr.name)) {
compatUtils.warnDeprecation(
DeprecationTypes.GLOBAL_MOUNT_CONTAINER,
null
)
break
}
}
}
}
// 掛載前清除內容
container.innerHTML = ''
// 真正的掛載 （元素， 是否複用[此處個人理解，僅供參考]，是否為SVG元素）
const proxy = mount(container, false, container instanceof SVGElement)
if (container instanceof Element) {
// 刪除元素上的 v-cloak 指令
container.removeAttribute('v-cloak')
// 設定data-v-app屬性
container.setAttribute('data-v-app', '')
}
return proxy
}
return app
}) as CreateAppFunction<Element>
h
官方定義：返回一個”虛擬節點“，通常縮寫為 VNode：一個普通物件，其中包含向 Vue 描述它應在頁面上渲染哪種節點的資訊，包括所有子節點的描述。它的目的是用於手動編寫的渲染函式；
h是什麼意思？根據祖師爺的回覆，h 的含義如下：
It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
它來自術語“hyperscript”，該術語常用於許多虛擬 dom 實現。“Hyperscript”本身代表“生成 HTML 結構的指令碼”，因為 HTML 是“超文字標記語言”的首字母縮寫詞。
回覆出處：https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/6
其實h()函式和createVNode()函式都是建立dom節點，他們的作用是一樣的，但是在VUE3中createVNode()函式的功能比h()函式要多且做了效能優化，渲染節點的速度也更快。
用法
-
第一個引數： HTML 標籤名、元件、非同步元件或函式式元件。使用返回 null 的函式將渲染一個註釋。此引數是必需的。
-
第二個引數： 一個物件，與我們將在模板中使用的 attribute、prop、class 和、style和事件相對應。可選。
-
第三個引數： 子代 VNode，使用
h()生成，或者使用字串來獲取“文字 VNode”，或帶有插槽的物件。可選。// 用法示例 h('div', {}, [ 'Some text comes first.', h('h1', 'A headline'), h(MyComponent, { someProp: 'foobar' }) ])
原始碼淺析
GitHub地址：
// 原始碼位置見上方[6]
export function h(type: any, propsOrChildren?: any, children?: any): VNode {
const l = arguments.length
// 如果引數是兩個
if (l === 2) {
// 判斷是否是物件，並且不為陣列
if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
// 所有VNode物件都有一個 __v_isVNode 屬性，isVNode 方法也是根據這個屬性來判斷是否為VNode物件。
if (isVNode(propsOrChildren)) {
return createVNode(type, null, [propsOrChildren])
}
// 只包含屬性不含有子元素
return createVNode(type, propsOrChildren)
} else {
// 忽略props屬性
return createVNode(type, null, propsOrChildren)
}
} else {
if (l > 3) {
// Array.prototype.slice.call(arguments, 2),這句話的意思就是說把呼叫方法的引數擷取出來,可以理解成是讓arguments轉換成一個陣列物件，讓arguments具有slice()方法
children = Array.prototype.slice.call(arguments, 2)
} else if (l === 3 && isVNode(children)) {
// 如果引數長度等於3，並且第三個引數為VNode物件
children = [children]
}
// h 函式內部的主要處理邏輯就是根據引數個數和引數型別，執行相應處理操作，但最終都是通過呼叫 createVNode 函式來建立 VNode 物件
return createVNode(type, propsOrChildren, children)
}
}
defineComponent
官方定義：defineComponent 只返回傳遞給它的物件。但是，就型別而言，返回的值有一個合成型別的建構函式，用於手動渲染函式、TSX 和 IDE 工具支援
definComponent主要是用來幫助Vue在TS下正確推斷出setup()元件的引數型別
引入 defineComponent() 以正確推斷 setup() 元件的引數型別；
defineComponent 可以正確適配無 props、陣列 props 等形式；
用法
-
引數：具有元件選項的物件或者是一個
setup函式，函式名稱將作為元件名稱來使用// 之前寫Ts + vue，需要宣告相關的資料型別。如下 // 宣告props和return的資料型別 interface Data { [key: string]: unknown } // 使用的時候入參要加上宣告，return也要加上宣告 export default { setup(props: Data): Data { // ... return { // ... } } } // 非常的繁瑣，使用defineComponent 之後，就可以省略這些型別定義，defineComponent 可以接受顯式的自定義props介面或從屬性驗證物件中自動推斷； // 用法示例1： import { defineComponent } from 'vue' const MyComponent = defineComponent({ data() { return { count: 1 } }, methods: { increment() { this.count++ } } }) // 用法示例2： // 不只適用於 setup，只要是 Vue 本身的 API ，defineComponent 都可以自動幫你推導。 import { defineComponent } from 'vue' export default defineComponent({ setup (props, context) { // ... return { // ... } } })
原始碼淺析
GitHub地址：原始碼檔案位置
...
...
...
// 實際上這個 api 只是直接 return 傳進來的 options,export default defineComponent({}) 是有點等價於export default {},目前看來這樣做的最大作用只是限制 type, setup 必須是函式，props 必須是 undefined 或者 物件。
export function defineComponent(options: unknown) {
return isFunction(options) ? { setup: options, name: options.name } : options
}
defineAsyncComponent
官方定義：建立一個只有在需要時才會載入的非同步元件。
用法
引數：接受一個返回 Promise 的工廠函式。Promise 的 resolve 回撥應該在服務端返回元件定義後被呼叫。
// 在 Vue 2.x 中，宣告一個非同步元件只需這樣
const asyncModal = () => import('./Modal.vue')
// 或者
const asyncModal = {
component: () => import('./Modal.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
}
// 現在，在 Vue 3 中，由於函式式元件被定義為純函式，因此非同步元件的定義需要通過將其包裹在新的 defineAsyncComponent 助手方法中來顯式地定義：
import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// 不帶選項的非同步元件
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
// 帶選項的非同步元件，對 2.x 所做的另一個更改是，component 選項現在被重新命名為loader，以便準確地傳達不能直接提供元件定義的資訊。注意： defineAsyncComponent不能使用在Vue Router上！
const asyncModalWithOptions = defineAsyncComponent({
loader: () => import('./Modal.vue'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent
})
原始碼淺析
GitHub地址： 41行- 196行
// 原始碼位置見上方
export function defineAsyncComponent<
T extends Component = { new (): ComponentPublicInstance }
>(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T {
if (isFunction(source)) {
source = { loader: source }
}
// 非同步元件的引數
const {
loader,
loadingComponent,
errorComponent,
delay = 200,
timeout, // undefined = never times out
suspensible = true,
onError: userOnError
} = source
let pendingRequest: Promise<ConcreteComponent> | null = null
let resolvedComp: ConcreteComponent | undefined
let retries = 0
// 重新嘗試load得到元件內容
const retry = () => {
retries++
pendingRequest = null
return load()
}
const load = (): Promise<ConcreteComponent> => {
let thisRequest: Promise<ConcreteComponent>
return (
// 如果pendingRequest 存在就return，否則實行loader()
pendingRequest ||
(thisRequest = pendingRequest = loader()
// 失敗場景處理
.catch(err => {
err = err instanceof Error ? err : new Error(String(err))
if (userOnError) {
// 對應文件中的 失敗捕獲回撥函式 使用者使用
return new Promise((resolve, reject) => {
const userRetry = () => resolve(retry())
const userFail = () => reject(err)
userOnError(err, userRetry, userFail, retries + 1)
})
} else {
throw err
}
})
.then((comp: any) => {
// 個人理解：在thisRequest = pendingRequest = loader()，loader()最開始屬於等待狀態，賦值給pendingRequest、在thisRequest此刻他們是相等的等待狀態，當進入then的時候pendingRequest已經發生了改變，所以返回pendingRequest
if (thisRequest !== pendingRequest && pendingRequest) {
return pendingRequest
}
// 如果在DEV環境則警告
if (__DEV__ && !comp) {
warn(
`Async component loader resolved to undefined. ` +
`If you are using retry(), make sure to return its return value.`
)
}
// interop module default
if (
comp &&
(comp.__esModule || comp[Symbol.toStringTag] === 'Module')
) {
comp = comp.default
}
// 如果在DEV環境則警告
if (__DEV__ && comp && !isObject(comp) && !isFunction(comp)) {
throw new Error(`Invalid async component load result: ${comp}`)
}
resolvedComp = comp
return comp
}))
)
}
return defineComponent({
__asyncLoader: load,
// 非同步元件統一名字
name: 'AsyncComponentWrapper',
// 元件有setup方法的走setup邏輯
setup() {
const instance = currentInstance!
// already resolved
if (resolvedComp) {
return () => createInnerComp(resolvedComp!, instance)
}
const onError = (err: Error) => {
pendingRequest = null
handleError(
err,
instance,
ErrorCodes.ASYNC_COMPONENT_LOADER,
!errorComponent /* do not throw in dev if user provided error component */
)
}
// suspense-controlled or SSR.
// 對應文件中如果父元件是一個 suspense 那麼只返回promise結果 其餘的控制交給 suspense 處理即可
if (
(__FEATURE_SUSPENSE__ && suspensible && instance.suspense) ||
(__NODE_JS__ && isInSSRComponentSetup)
) {
return load()
.then(comp => {
return () => createInnerComp(comp, instance)
})
.catch(err => {
onError(err)
return () =>
errorComponent
? createVNode(errorComponent as ConcreteComponent, {
error: err
})
: null
})
}
const loaded = ref(false)
const error = ref()
const delayed = ref(!!delay)
if (delay) {
setTimeout(() => {
delayed.value = false
}, delay)
}
if (timeout != null) {
setTimeout(() => {
if (!loaded.value && !error.value) {
const err = new Error(
`Async component timed out after ${timeout}ms.`
)
onError(err)
error.value = err
}
}, timeout)
}
load()
.then(() => {
// promise成功返回後觸發trigger導致元件更新 重新渲染元件 只不過此時我們已經得到元件內容
loaded.value = true
})
.catch(err => {
onError(err)
error.value = err
})
// 返回的函式會被當做元件例項的 render 函式
return () => {
// render初始執行觸發 loaded的依賴收集
if (loaded.value && resolvedComp) {
return createInnerComp(resolvedComp, instance)
} else if (error.value && errorComponent) {
return createVNode(errorComponent as ConcreteComponent, {
error: error.value
})
} else if (loadingComponent && !delayed.value) {
return createVNode(loadingComponent as ConcreteComponent)
}
}
}
}) as any
}
resolveComponent
官方定義：如果在當前應用例項中可用，則允許按名稱解析 component，返回一個 Component。如果沒有找到，則返回接收的引數 name。
用法
引數：已載入的元件的名稱
const app = createApp({})
app.component('MyComponent', {
/* ... */
})
import { resolveComponent } from 'vue'
render() {
const MyComponent = resolveComponent('MyComponent')
}
原始碼淺析
GitHub地址：
- resolveComponent()：21行- 27行 [7]
- resolveAsset()：62行- 123行 [8]
// 接收一個name引數，主要還是在resolveAsset方法中做了處理，原始碼位置見上方[7]
export function resolveComponent(
name: string,
maybeSelfReference?: boolean
): ConcreteComponent | string {
return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name
}
// resolveAsset原始碼在上方地址[8]
function resolveAsset(
type: AssetTypes,
name: string,
warnMissing = true,
maybeSelfReference = false
) {
// 尋找當前渲染例項，不存在則為當前例項
const instance = currentRenderingInstance || currentInstance
if (instance) {
const Component = instance.type
// 自我名稱具有最高的優先順序
if (type === COMPONENTS) {
// getComponentName 首先判斷傳入的Component引數是不是函式，如果是函式優先使用.displayName屬性，其次使用.name
const selfName = getComponentName(Component)
if (
// camelize 使用replace方法，正則/-(\w)/gname，匹配後toUpperCase() 轉換成大寫
// capitalize函式：str.charAt(0).toUpperCase() + str.slice(1) 首字母大寫 + 處理後的字元
selfName &&
(selfName === name ||
selfName === camelize(name) ||
selfName === capitalize(camelize(name)))
) {
return Component
}
}
const res =
// 註冊
// 首先檢查例項[type]，它被解析為選項API
resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
// 全域性註冊
resolve(instance.appContext[type], name)
if (!res && maybeSelfReference) {
return Component
}
if (__DEV__ && warnMissing && !res) {
warn(`Failed to resolve ${type.slice(0, -1)}: ${name}`)
}
return res
} else if (__DEV__) {
// 如果例項不存在，並且在DEV環境警告：can only be used in render() or setup()
warn(
`resolve${capitalize(type.slice(0, -1))} ` +
`can only be used in render() or setup().`
)
}
}
resolveDynamicComponent
官方定義： 返回已解析的 Component 或新建立的 VNode，其中元件名稱作為節點標籤。如果找不到 Component，將發出警告。
用法
引數：接受一個引數：component
import { resolveDynamicComponent } from 'vue'
render () {
const MyComponent = resolveDynamicComponent('MyComponent')
}
原始碼淺析
GitHub地址：
- resolveDirective()： 43行 - 48行內容 [9]
- resolveAsset()：62行- 123行
// 原始碼位置位於上方[9]位置處
// 根據該函式的名稱，我們可以知道它用於解析動態元件,在 resolveDynamicComponent 函式內部，若 component 引數是字串型別，則會呼叫前面介紹的 resolveAsset 方法來解析元件,
// 如果 resolveAsset 函式獲取不到對應的元件，則會返回當前 component 引數的值。比如 resolveDynamicComponent('div') 將返回 'div' 字串
// 原始碼見上方[1]地址
export function resolveDynamicComponent(component: unknown): VNodeTypes {
if (isString(component)) {
return resolveAsset(COMPONENTS, component, false) || component
} else {
// 無效型別將引發警告,如果 component 引數非字串型別，則會返回 component || NULL_DYNAMIC_COMPONENT 這行語句的執行結果，其中 NULL_DYNAMIC_COMPONENT 的值是一個 Symbol 物件。
return (component || NULL_DYNAMIC_COMPONENT) as any
}
}
// resolveAsset函式解析見上方[8]位置處
resolveDirective
如果在當前應用例項中可用，則允許通過其名稱解析一個 directive。返回一個 Directive。如果沒有找到，則返回 undefined。
用法
- 第一個引數：已載入的指令的名稱。
原始碼淺析
GitHub地址：
- resolveDirective()： 43行 - 48行內容 [10]
- resolveAsset()：62行- 123行
/**
* 原始碼位置見上方[10]位置處
*/
export function resolveDirective(name: string): Directive | undefined {
// 然後呼叫前面介紹的 resolveAsset 方法來解析元件,resolveAsset函式解析見上方[8]位置處
return resolveAsset(DIRECTIVES, name)
}
withDirectives
官方定義：允許將指令應用於 VNode。返回一個包含應用指令的 VNode。
用法
-
第一個引數：一個虛擬節點，通常使用
h()建立 -
第二個引數：一個指令陣列，每個指令本身都是一個陣列，最多可以定義 4 個索引。
import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')
return withDirectives(h('div'), [
[foo, this.x],
[bar, this.y]
])
原始碼淺析
GitHub地址：
- resolveDirective()： 85行 - 114內容 [11]
// 原始碼連結在上方[11]位置處
export function withDirectives<T extends VNode>(
vnode: T,
directives: DirectiveArguments
): T {
// 獲取當前例項
const internalInstance = currentRenderingInstance
if (internalInstance === null) {
// 如果在 render 函式外面使用 withDirectives() 則會丟擲異常：
__DEV__ && warn(`withDirectives can only be used inside render functions.`)
return vnode
}
const instance = internalInstance.proxy
// 在 vnode 上繫結 dirs 屬性，並且遍歷傳入的 directives 陣列
const bindings: DirectiveBinding[] = vnode.dirs || (vnode.dirs = [])
for (let i = 0; i < directives.length; i++) {
let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]
if (isFunction(dir)) {
dir = {
mounted: dir,
updated: dir
} as ObjectDirective
}
bindings.push({
dir,
instance,
value,
oldValue: void 0,
arg,
modifiers
})
}
return vnode
}
createRenderer
官方定義：createRenderer 函式接受兩個泛型引數： HostNode 和 HostElement，對應於宿主環境中的 Node 和 Element 型別。
用法
- 第一個引數：HostNode宿主環境中的節點。
- 第二個引數：Element宿主環境中的元素。
// 對於 runtime-dom，HostNode 將是 DOM Node 介面，HostElement 將是 DOM Element 介面。
// 自定義渲染器可以傳入特定於平臺的型別，如下所示：
// createRenderer(HostNode, HostElement),兩個通用引數HostNode(主機環境中的節點)和HostElement(宿主環境中的元素)，對應於宿主環境。
// reateRenderer(使用（可選的）選項建立一個 Renderer 例項。),該方法返回了 baseCreateRenderer
export function createRenderer<
HostNode = RendererNode,
HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
return baseCreateRenderer<HostNode, HostElement>(options)
}
原始碼解析
- createRenderer（）：419 行- 424行內容 [3]
- baseCreateRenderer()：448 行- 2418行 [4]
export function createRenderer<
HostNode = RendererNode,
HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
return baseCreateRenderer<HostNode, HostElement>(options)
}
// baseCreateRenderer這個放2000行的左右的程式碼量，這裡就完整不貼過來了，裡面是渲染的核心程式碼，從平臺特性 options 取出相關 API，實現了 patch、處理節點、處理元件、更新元件、安裝元件例項等等方法，最終返回了一個renderer物件。
function baseCreateRenderer(
options: RendererOptions,
createHydrationFns?: typeof createHydrationFunctions
): any {
// compile-time feature flags check
if (__ESM_BUNDLER__ && !__TEST__) {
initFeatureFlags()
}
if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
const target = getGlobalThis()
target.__VUE__ = true
setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__)
}
const {
insert: hostInsert,
remove: hostRemove,
patchProp: hostPatchProp,
forcePatchProp: hostForcePatchProp,
createElement: hostCreateElement,
createText: hostCreateText,
createComment: hostCreateComment,
setText: hostSetText,
setElementText: hostSetElementText,
parentNode: hostParentNode,
nextSibling: hostNextSibling,
setScopeId: hostSetScopeId = NOOP,
cloneNode: hostCloneNode,
insertStaticContent: hostInsertStaticContent
} = options
...
...
...
// 返回 render hydrate createApp三個函式，生成的 render 傳給 createAppAPI ，hydrate 為可選引數，ssr 的場景下會用到；
return {
render,
hydrate,
createApp: createAppAPI(render, hydrate)
}
}
nextTick
官方定義：將回撥推遲到下一個 DOM 更新週期之後執行。在更改了一些資料以等待 DOM 更新後立即使用它。
import { createApp, nextTick } from 'vue'
const app = createApp({
setup() {
const message = ref('Hello!')
const changeMessage = async newMessage => {
message.value = newMessage
await nextTick()
console.log('Now DOM is updated')
}
}
})
原始碼淺析
GitHub地址：
- nextTick()： 42行 - 48行內容
// 原始碼位置在上方
// 這裡直接建立一個非同步任務，但是改變dom屬性也是非同步策略，怎麼保證dom載入完成
// Vue2.x是 會判斷瀏覽器是否支援promise屬性 -> 是否支援MutationObserver -> 是否支援setImmediate -> 都不支援使用setTimeout，Vue3不再支援IE11，所以nextTick直接使用Promise
// Vue 非同步執行 DOM 更新。只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作上非常重要。然後，在下一個的事件迴圈“tick”中，Vue 重新整理佇列並執行實際 (已去重的) 工作。
export function nextTick(
this: ComponentPublicInstance | void,
fn?: () => void
): Promise<void> {
const p = currentFlushPromise || resolvedPromise
return fn ? p.then(this ? fn.bind(this) : fn) : p
}
// 你設定vm.someData = 'new value'，該元件不會立即重新渲染。當重新整理佇列時，元件會在事件迴圈佇列清空時的下一個“tick”更新。如果你想在 DOM 狀態更新後做點什 ，可以在資料變化之後立即使用Vue.nextTick(callback) 。
mergeProps
官方定義： 將包含 VNode prop 的多個物件合併為一個單獨的物件。其返回的是一個新建立的物件，而作為引數傳遞的物件則不會被修改。
用法
引數： 可以傳遞不限數量的物件
import { h, mergeProps } from 'vue'
export default {
inheritAttrs: false,
render() {
const props = mergeProps({
// 該 class 將與 $attrs 中的其他 class 合併。
class: 'active'
}, this.$attrs)
return h('div', props)
}
}
原始碼淺析
GitHub地址：
- mergeProps()： 687行 - 712行
export function mergeProps(...args: (Data & VNodeProps)[]) {
// extend就是Object.assign方法， ret合併第一個引數為物件
const ret = extend({}, args[0])
// 遍歷args引數
for (let i = 1; i < args.length; i++) {
const toMerge = args[i]
for (const key in toMerge) {
if (key === 'class') {
// 合併class
if (ret.class !== toMerge.class) {
ret.class = normalizeClass([ret.class, toMerge.class])
}
} else if (key === 'style') {
// 合併style
ret.style = normalizeStyle([ret.style, toMerge.style])
} else if (isOn(key)) {、
// 判斷是不是以 on開頭的
const existing = ret[key]
const incoming = toMerge[key]
if (existing !== incoming) {
// 如果第一個引數中不存在,則合併，否則新增
ret[key] = existing
? [].concat(existing as any, incoming as any)
: incoming
}
} else if (key !== '') {
// key不為空則新增屬性
ret[key] = toMerge[key]
}
}
}
return ret
}
useCssModule
官方定義：允許在 setup 的單檔案元件函式中訪問 CSS 模組。
用法
- 引數：CSS 模組的名稱。預設為
'$style'
// useCssModule 只能在 render 或 setup 函式中使用。
// 這裡的name不止可以填寫$style,
/*
*<style module="aaa"
* ...
*</style>
*/
// 這樣就可以使用 const style = useCssModule(‘aaa'),來獲取相應內容
<script>
import { h, useCssModule } from 'vue'
export default {
setup () {
const style = useCssModule()
return () => h('div', {
class: style.success
}, 'Task complete!')
}
}
</script>
<style module>
.success {
color: #090;
}
</style>
// 在 <style> 上新增 module 後， $style的計算屬性就會被自動注入元件。
<style module>
.six
color: red;
}
.one
font-size:62px;
}
</style>
// 新增model後可以直接使用$style繫結屬性
<template>
<div>
<p :class="$style.red">
hello red!
</p>
</div>
</template>
原始碼解析
GitHub地址：
useCssModule()： 1行 - 30行
import { warn, getCurrentInstance } from '@vue/runtime-core'
import { EMPTY_OBJ } from '@vue/shared'
// 取出 this.$style
export function useCssModule(name = '$style'): Record<string, string> {
/* 如果是istanbul覆蓋率測試則跳出 */
if (!__GLOBAL__) {
// 獲取當前例項
const instance = getCurrentInstance()!
if (!instance) {
// useCssModule 只能在 render 或 setup 函式中使用。
__DEV__ && warn(`useCssModule must be called inside setup()`)
// EMPTY_OBJ是使用Object.freeze()凍結物件
return EMPTY_OBJ
}
const modules = instance.type.__cssModules
// 如果不存在css模組，警告
if (!modules) {
__DEV__ && warn(`Current instance does not have CSS modules injected.`)
return EMPTY_OBJ
}
const mod = modules[name]
// 如果不存在未找到name的css模組，警告
if (!mod) {
__DEV__ &&
warn(`Current instance does not have CSS module named "${name}".`)
return EMPTY_OBJ
}
return mod as Record<string, string>
} else {
if (__DEV__) {
warn(`useCssModule() is not supported in the global build.`)
}
return EMPTY_OBJ
}
}
version
官方定義： 以字串形式提供已安裝的 Vue 的版本號。
// vue-next/packages/vue/package.json 中的version 為3.1.2，使用.split('.')[0]，得出3
const version = Number(Vue.version.split('.')[0])
if (version === 3) {
// Vue 3
} else if (version === 2) {
// Vue 2
} else {
// 不支援的 Vue 的版本
}
參考資料
結尾
好了，以上就是本篇全部文章內容啦。
如果遇到問題或者有其他意見可以在下方評論區貼出！
碼字不易。如果覺得本篇文章對你有幫助的話，希望你可以留言點贊支援一下，非常感謝~