It is no surprise that VUE3 will be officially released soon. In a short period of time after the launch, vuE3 will undoubtedly become the hottest topic in the front end. In line with the idea that the popularity of vuE3 should be early, I began to make preparations in this aspect before the official release of VUE3. In the near future, I will produce vuE3 related content all the time, hoping to gain the favor of audience leaders.

So without further ado, today’s topic is about the Render method in Vue3, if you read RFC carefully then you may have some impression, but most likely will not focus on this. For most of you, you won’t be exposed to the render method, because you’ll be developing in.vue files directly, and vue-loader will help you compile templates into the Render method. Further, you might write components using JSX, so you’ll be closer to the Render method, but babel-transform-xxx will compile the content for you, and the details will still be unclear.

So today I will pick a pick vue3 in the render method, if it is useful to you, please also like, pay attention to oh.

Since we’re talking about the Render method, we’re not going to touch on templates or JSX syntax, so all of the rest of the demo code will be pure JS. Let’s take a look at the simplest vUE component.

function Comp(props, { slots, attrs }) {
    return h('div', {id: 'root'},'this is content'])}Copy the code

This is a function component in VUe3. In VUe3, a function component no longer needs to be implemented with a functional declaration. If your component is a function, it is a function component, whereas if it is an object, it is a stateful component.

That’s not the point, of course. The point is the h function, which might be better known by another name: createElement. In VUe3, we need to introduce this function by importing {h} from ‘vue’. H receives three parameters, which are:

  • type, component type, string representing native node, object or method representing custom component
  • propsComponent properties, passed in through the object
  • slots, component slot content

The first two are well understood and not what we’re going to focus on today, so we won’t go into that here, but we’ll focus on the last parameter. In VUe3, the third parameter is written in different ways, like anise in anise beans:

  • ['content']
  • 'content'
  • () => 'content'
  • { default: 'content' }
  • { default: () => 'content' }
  • { default: () => ['content'] }

So if you write it this way, you’re going to get the same result. Are you wondering why vuE3 is written in so many different ways? It doesn’t matter that I was not clear at the beginning, and I will explain it to you slowly from now on.

The first and second are best understood, and the second is an abbreviation of the first, as long as children have only one element:

<Comp>
    content
</Comp>
Copy the code

The above demo corresponds to JSX in a similar way, so the first two ways are easy to understand.

So let’s talk about the third one. Let’s take a look at the contents of VUE RFCS:

Inside Comp, this.$slots.default will be a function in both cases and returns the same VNodes. However, the 2nd case will be more performant as this.msg will be registered as a dependency of the child component only.

The demo in this sentence is as follows:

h(Comp, [
  h('div'.this.msg)
])

// equivalent:
h(Comp, () => [
  h('div'.this.msg)
])
Copy the code

In simple terms, when you write any of the first three methods, when you get this.$slots.default from Comp, you get a method that only returns the actual content when called.

However, using () => is better because changes to this. MSG only cause the child content to be re-rendered. In fact, the parent component does not care about this. MSG so there is no need to re-render it when it is updated. This relates to the reactive principle of VUE, which I won’t expand on here, but will share with you later.

From this we can conclude that we should normally abandon the first two and use the third, since they end up performing the same and the latter is better.

This is true, but it is important to note that this is only useful for custom components. If the node is a native node, it cannot be shown.

/ / feasible
h(YourComp, () => 'content')

/ / is not workable
h('div', () = >'content')
Copy the code

As you can guess, Vue3 has no concept of slot for rendering native nodes, and renders native nodes differently from custom components. It’s not easy to explain why VUE doesn’t design a unified interface, which I’ll explore as well.

After that, let’s talk about the next three kinds of objects.

When we see an object, we should quickly respond to it with a key value. And then think about it again, yes, the named slot. Vue can have multiple slots per component, so how do we represent multiple slots? Different keys, of course:

h(Comp, null, {
    default: (a)= > 'default'.foo: (a)= > 'foo'.bar: (a)= > 'bar'
})
Copy the code

Note that the second argument is needed even if there is no props, because function H finds that if the second argument is an object, it defaults to props.

Because there is only one slot by default, it is the default slot, so if there is only one children node, you can omit the object notation, which is the notation we saw earlier.

It also cannot be used for native nodes, which is a feature of custom components.

And because slots are all functions, scopeSlot is pretty easy to understand. Pass in arguments when calling the slot:

// Comp
h('div', [slots.default('arg')])
Copy the code

This way, the parameter can be retrieved at the place where Comp is called

h(Comp, (content) => h('div', [content]))
Copy the code

This is actually better understood, and personally preferred, than adding something called scopeSlot out of thin air.

explore

After understanding the use of slot in VUe3, I couldn’t help but wonder if slot is a function and I could pass the function directly through props. So I gave it a try:

// Comp
h('div', [props.renderA()])

// App
h(Comp, {renderA: (a)= > h('span'.'content')})
Copy the code

Find that this is possible and that rerendering of Reactive is entirely possible.

Of course, this is just a preliminary exploration, I’m not sure if there is any special treatment for slot in Vue, if there is no special treatment, then the use of renderProps in Vue is completely feasible, I’m looking forward to it.

Well, that’s all for today’s sharing. I’ll try to share more meaningful content for you.