VueJS - Render Functions & h
Doubts on the render property
new Vue({
render: h => h(App),
}).$mount('#app')
h => h(App)
/* original */
hello = function() {
return "Hello World!";
}
/* Arrow function */
hello = () => {
return "Hello World!";
}
/* Arrow function with defualt return */
hello = () => "Hello World!";
/* Arrow function with Parameters */
hello = (val) => "Hello " + val;
/* Arrow function without Parentheses */
hello = val => "Hello " + val;
h
const h = this.$createElement
Aliasing createElement to h is a common convention you’ll see in the Vue ecosystem and is actually required for JSX. Starting with version 3.4.0 of the Babel plugin for Vue, we automatically inject const h = this.$createElement in any method and getter (not functions or arrow functions), declared in ES2015 syntax that has JSX, so you can drop the (h) parameter. With prior versions of the plugin, your app would throw an error if h was not available in the scope.
from the Official Vue Guide
createElement
A function to create Virtual DOM in Vue