(轉)關於Vue中的 render: h => h(App) 具體是什麼含義?
原文連結:https://www.cnblogs.com/samve/p/9960963.html
render: h => h(App) 是下面內容的縮寫:
render: function (createElement) {
return createElement(App);
}
進一步縮寫為(ES6 語法):
render (createElement) {
return createElement(App);
}
再進一步縮寫為:
render (h){
return h(App);
}
按照 ES6 箭頭函式的寫法,就得到了:
render: h => h(App);
其中 根據 Vue.js 作者 Even You 的回覆,h 的含義如下:
It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
它來自單詞 hyperscript,這個單詞通常用在 virtual-dom 的實現中。Hyperscript 本身是指
生成HTML 結構的 script 指令碼,因為 HTML 是 hyper-text markup language 的縮寫(超文字標記語言)
理解:createElement 函式是用來生成 HTML DOM 元素的,也就是上文中的 generate HTML structures,也就是 Hyperscript,這樣作者才把 createElement 簡寫成 h。
Vue.js 裡面的 createElement 函式,這個函式的作用就是生成一個 VNode節點,render 函式得到這個 VNode 節點之後,返回給 Vue.js 的 mount 函式,渲染成真實 DOM 節點,並掛載到根節點上。
還有另外一種寫法效果是一樣的:
import App from './App'
new Vue({
el: '#root',
template: '<App></App>',
components: {
App
}
})