Vue3全局APi解析-源碼學習

  • 2021 年 6 月 30 日
  • 筆記

本文章共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地址：

// 源碼位置上方[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 是「超文本標記語言」的首字母縮寫詞。

回復出處：//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地址：

// 接收一個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地址：

// 源碼位置位於上方[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地址：

/**
 * 源碼位置見上方[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地址：

// 源碼鏈接在上方[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)
}

源碼解析

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地址：

// 源碼位置在上方

// 這裡直接創建一個非同步任務，但是改變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地址：

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 的版本
}

參考資料

Vue-next-GitHub

Vue3官方文檔

Vue3源碼分析

vue3 VNode

結尾

好了，以上就是本篇全部文章內容啦。

如果遇到問題或者有其他意見可以在下方評論區貼出！

碼字不易。如果覺得本篇文章對你有幫助的話，希望你可以留言點贊支援一下，非常感謝~

VirMach 便宜 VPS

QNews

QNews