What is the meaning of the arrow function defining the 'render' VueJS method?:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
From https://vuejs.org/v2/guide/render-function.html
Aliasing createElement to h is a common convention you’ll see in the
Vue ecosystem and is actually required for JSX. If h is not available
in the scope, your app will throw an error.
Therefore here is the equivalent of the previous code:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: function(createElement) {
return createElement(App);
}
})
The arrow function meaning is: let 'render' be a function that accepts the createElement() function as argument and that returns createElement(App) where App is a VueJS
single-file-component.
Here is a working example showing the equivalent of this arrow function. Below is the complete code as well:
<!DOCTYPE html>
<html>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@2.3.3"></script>
<script type="text/javascript">
new Vue({
el: '#app',
// render is a function defined here as accepting the function h as parameter and returning the h result when evaluated with a single file component or in this case a template (in here two params: the tag and the value)
render: h => h('h1', 'Hello')
// Same but probably easier to understand for most humans who prefer long but straightforward text rather than short but cryptic:
/*render: function(createElement) {
return createElement('h1', 'Hello');
}*/
})
</script>
</body>
</html>
BTW there is a cryptic-er way to use a single file component (the ES6 spread operator):
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
...App
})
No comments:
Post a Comment