This is the 20th day of my participation in the August Text Challenge.More challenges in August

In this article we look at the last five global APIcreateRenderer, nextTick, mergeProps, useCssModule, and Version uses, and what we need to be aware of.

How to use

createRenderer

The createRenderer function takes two generic parameters, HostNode and HostElement, corresponding to the Node and Element types in the host environment. Custom renderers can pass platform-specific types as follows:

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

nextTick

Defer the callback until after the next DOM update cycle. Sometimes you are not sure whether the dom you are using has been rendered or not. You can use this method to solve this problem:

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('Operation after update')}return {
            title,
            changeTitle
        }
    }
})
Copy the code

When we call changeTitle, we can perform the DOM update from console.log. We can also do this using the $nextTick instance method, which we’ll cover in a later article.

mergeProps

Officially, merge multiple objects containing VNode Prop into a single object. It returns a newly created object, and the object passed as a parameter is not modified. Merge all VNode prop objects into one object as follows:

app.component('my-component', {
    inheritAttrs: false.render() {
        const props = mergeProps(
            {
                // This class will be merged with other classes in $attrs.
                class: 'active'
            },
            this.$attrs,
            {
                name:'div'.class:'red'})console.log(props)

        return h('div', props,'hello world')}})Copy the code

Print the result

{class: "active red".name: "div"}
Copy the code

The renderings

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

MergeProps is to combine all objects into one object. It is worth noting that the values of these properties are merged rather than overwritten.

useCssModule

Allows CSS modules to be accessed in a single file component function of Setup. Use as follows:

<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>
Copy the code

We use useCssModule, which is a class name style that can be used directly in the rendering function, but there are two things to note here:

  1. UseCssModule can only be used in the Render or setup functions.

  2. UseCssModule () is not supported in global generation, which means we can only use it in single files.

version

Provide the version number of the installed Vue as a string. This method is already covered in the should API, so I won’t go into it here. For more information, please refer to the version section of Vue3 API section (4).

conclusion

  1. Other apis we use a little bit less, but nextTick we use a little bit more.

  2. The useCssModule method does not support global use, which is something we should be aware of.

For more articles, the portal has opened: Look back at the Vue3 catalogue!