This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Having covered the application API in the previous article, this article will take a look at the use of global APIcreateApp and H, and what we need to be aware of.

createApp

CreateApp returns an application instance that provides the application context. The entire tree of components mounted by the application instance shares the same context. Use as follows:

const { createApp } = Vue
const app = createApp({
    setup(){},})Copy the code

To get an app instance, you can use the chained method. It is worth noting that instantiation in Vue3 is not the same as in Vue2.

h

The h function returns a “virtual node,” often abbreviated to VNode. We can use this function for custom components or when we need to dynamically change the DOM, but for custom components we usually use a single.vue file.

parameter

Accepts three parameters: Type, props, and children.

type

HTML tag name, component, asynchronous component or functional components, this parameter is necessary, can be: String | Object | Function, we can use a custom components rendering Function, for example, use the following:

app.component('my-component', {
    render(){
        return h('h1', {},"hello world")}})Copy the code

Whatever the type value is, it is essentially a tag: a native element or custom component name.

props

An object that corresponds to the attributes, prop, and events that we will use in the template. This parameter is optional and can only be Object. Use as follows:

app.component('my-component', {
    render() {
        return h('h1', {
            name:'slifree'.onClick:function(){
                console.log('click'); }},"hello world")}})Copy the code

children

Child vNodes, generated using h(), or using strings to get “text vNodes”, or objects with slots. This parameter is optional and can be: String | Object | Array, is for the nested dom structure, use the following:

app.component('my-component', {
    render() {
    // Take array as an example
        return h('div', {},'hello',
            h('h1', {}, 'world')]}})Copy the code

Matters needing attention

VNodes must be unique

If you really need to repeat elements/components a lot, you can use factory functions to do it. Suppose you need five of the same elements:

We can’t do that

render() {
  const h1 = h('h1'.'hello world')
  return h('div'[// error - duplicate Vnode!
    h1, h1
  ])
}
Copy the code

We can do that

render() {
  return h('div'.Array.from({ length: 5 }).map(() = > {
      return h('h1'.'hello world')}}))Copy the code

Replace template function

As you can see from the VNodes must be unique example, we can use JS functions instead of template functions: V-if and V-for, let’s look at them next.

If using the template for v-if and v-for:

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>
Copy the code

Use JavaScript if/else and map() to rewrite the render function:

props: ['items'].render() {
  if (this.items.length) {
    return h('ul'.this.items.map((item) = > {
      return h('li', item.name)
    }))
  } else {
    return h('p'.'No items found.')}}Copy the code

conclusion

1. In Vue3, createApp is used to get the app instance, which is different from Vue2. Note the following.

2. We use h functions reasonably, but in project development we usually use single file. Vue instead of rendering functions to define components.

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