【Vuejs】1029- 源码浅析-Vue3中的13个全局 API

发表于 2年以前  | 总阅读数:774 次

前言

不知不觉Vue-next[1]的版本已经来到了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 是“超文本标记语言”的首字母缩写词。

回复出处:github.com/vuejs/babel…[7]

其实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(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地址:源码文件位置[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'),
  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行[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环境则警告
          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\][11]
  • resolveAsset():62行- 123行 \[8\][12]
// 接收一个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\][13]
  • resolveAsset():62行- 123行[14]
// 源码位置位于上方[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\][15]
  • resolveAsset():62行- 123行[16]
/**
 * 源码位置见上方[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\][17]
// 源码链接在上方[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 函数接受两个泛型参数:HostNodeHostElement,对应于宿主环境中的 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\][18]
  • baseCreateRenderer():448 行- 2418行 \[4\][19]
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行内容[20]
// 源码位置在上方

// 这里直接创建一个异步任务,但是改变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行[21]
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[22] 的单文件组件[23]函数中访问 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行[24]

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 的版本
}
复制代码

结尾

好了,以上就是本篇全部文章内容啦。

本文由哈喽比特于2年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/YgkNEZVtIhTrNaB75BD-ZQ

 相关推荐

刘强东夫妇:“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。

发布于:6月以前  |  808次阅读  |  详细内容 »

博主曝三大运营商,将集体采购百万台华为Mate60系列

日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于:6月以前  |  770次阅读  |  详细内容 »

ASML CEO警告:出口管制不是可行做法,不要“逼迫中国大陆创新”

据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于:6月以前  |  756次阅读  |  详细内容 »

抖音中长视频App青桃更名抖音精选,字节再发力对抗B站

今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。

发布于:6月以前  |  648次阅读  |  详细内容 »

威马CDO:中国每百户家庭仅17户有车

日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。

发布于:6月以前  |  589次阅读  |  详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。

发布于:6月以前  |  449次阅读  |  详细内容 »

苹果据称正引入3D打印技术,用以生产智能手表的钢质底盘

据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。

发布于:7月以前  |  446次阅读  |  详细内容 »

千万级抖音网红秀才账号被封禁

9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...

发布于:6月以前  |  445次阅读  |  详细内容 »

亚马逊股东起诉公司和贝索斯,称其在购买卫星发射服务时忽视了 SpaceX

9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。

发布于:6月以前  |  444次阅读  |  详细内容 »

苹果上线AppsbyApple网站,以推广自家应用程序

据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。

发布于:6月以前  |  442次阅读  |  详细内容 »

特斯拉美国降价引发投资者不满:“这是短期麻醉剂”

特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。

发布于:6月以前  |  441次阅读  |  详细内容 »

光刻机巨头阿斯麦:拿到许可,继续对华出口

据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。

发布于:6月以前  |  437次阅读  |  详细内容 »

马斯克与库克首次隔空合作:为苹果提供卫星服务

近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。

发布于:6月以前  |  430次阅读  |  详细内容 »

𝕏(推特)调整隐私政策,可拿用户发布的信息训练 AI 模型

据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。

发布于:6月以前  |  428次阅读  |  详细内容 »

荣耀CEO谈华为手机回归:替老同事们高兴,对行业也是好事

9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。

发布于:6月以前  |  423次阅读  |  详细内容 »

AI操控无人机能力超越人类冠军

《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。

发布于:7月以前  |  423次阅读  |  详细内容 »

AI生成的蘑菇科普书存在可致命错误

近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。

发布于:7月以前  |  420次阅读  |  详细内容 »

社交媒体平台𝕏计划收集用户生物识别数据与工作教育经历

社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”

发布于:7月以前  |  411次阅读  |  详细内容 »

国产扫地机器人热销欧洲,国产割草机器人抢占欧洲草坪

2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。

发布于:6月以前  |  406次阅读  |  详细内容 »

罗永浩吐槽iPhone15和14不会有区别,除了序列号变了

罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。

发布于:6月以前  |  398次阅读  |  详细内容 »
 目录