源码浅析Vue3中的13个全局Api

2021-07-21 10:01 前端研究所

图片

不知不觉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\][2]
  • ensureRenderer()35 行- 37行内容 \[2\][3]
  • createRenderer()419 行- 424行内容 \[3\][4]
  • baseCreateRenderer()448 行- 2418行 \[4\][5]
  • app._component:174行\[5\][6]
// 源码位置上方[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 是“超文本标记语言”的首字母缩写词。

其实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地址:

  • h:174行 - 196行 \[6\][8]
// 源码位置见上方[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(arguments2)
    } 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 { count1 }
    },
    methods: {
      increment() {
        this.count++
      }
    }
    })

    // 用法示例2:
    // 不只适用于 setup,只要是 Vue 本身的 API ,defineComponent 都可以自动帮你推导。
    import { defineComponent } from 'vue'
    export default defineComponent({
    setup (props, context) {
      // ...
      
      return {
        // ...
      }
    }
    })

源码浅析

GitHub地址:源码文件位置[9]

...
...
...
//  实际上这个 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'),
  delay200,
  timeout3000,
  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'),
  delay200,
  timeout3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

源码浅析

GitHub地址:41行- 196行[10]

// 源码位置见上方
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环境则警告
           本文章转载自公众号:WEBqdyjs

首页 - 前端 相关的更多文章: