这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

这篇文章我们来讲一下最后五个全局APIcreateRenderer、nextTick、mergeProps、useCssModule和version的使用，以及我们需要注意的地方。

如何使用

createRenderer

createRenderer 函数接受两个泛型参数： HostNode 和 HostElement，对应于宿主环境中的 Node 和 Element 类型。自定义渲染器可以传入特定于平台的类型，如下：

import { createRenderer } from 'vue'
const { render, createApp } = createRenderer<Node, Element>({
  patchProp,
  ...nodeOps
})

nextTick

将回调推迟到下一个 DOM 更新周期之后执行。有的时候你不确定在使用一个dom的是不是已经被渲染完成，那么你就可以使用这个方法来这解决这个疑虑，使用方法如下：

import { createApp, nextTick } from 'vue'

const app = createApp({
    setup() {
        const title = ref("Hello, world!")
        const changeTitle = async val => {
            title.value = val
            await nextTick()
            console.log('更新完成后操作')
        }
        return {
            title,
            changeTitle
        }
    }
})

当我们调用changeTitle的时候，可以在console.log的位置，执行dom更新后的操作。我们也可以使用$nextTick实例方法来实现这个功能，这会在我们后面的文章提到。

mergeProps

官方说，将包含 VNode prop 的多个对象合并为一个单独的对象。其返回的是一个新创建的对象，而作为参数传递的对象则不会被修改。其实就是把VNode上所有的prop合并为一个对象，使用如下：

app.component('my-component', {
    inheritAttrs: false,
    render() {
        const props = mergeProps(
            {
                // 该 class 将与 $attrs 中的其他 class 合并。
                class: 'active'
            },
            this.$attrs,
            {
                name:'div',
                class:'red'
            }
        )
        console.log(props)

        return h('div', props,'hello world')
    }
})

打印结果

{class: "active red", name: "div"}

渲染结果

<div class="active red" name="div">hello world</div>

mergeProps就是把所有对象合并为一个对象。值得我们注意的是：这些property的值是被合并的而不是覆盖的。

useCssModule

允许在 setup 的单文件组件函数中访问 CSS 模块。使用如下：

<script>
import { h, useCssModule } from 'vue'
export default {
  setup() {
    const style = useCssModule()
    return () =>
      h('h1',{
          class: style.success
        },'hello world')
  }
}
</script>
<style module>
.success {
  color: #090;
}
</style>

我们使用useCssModule，就是可以在渲染函数直接使用style的类名样式，但是这里我们需要注意两点：

useCssModule 只能在 render 或 setup 函数中使用。
全局生成中不支持useCssModule(),也就是说我们只能用在单文件中。

version

以字符串形式提供已安装的 Vue 的版本号。这个方法我们在应该API中已经讲到，这里就不多赘述了。如想了解可以参考回首Vue3之API篇（四）这边文章的version部分。

总结

其他的api我们相对而言会用的少一点，但是nextTick我们会相对用的多一点。
useCssModule方法不支持全局使用，这是我们应该注意的地方。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之API篇（七）