vue架構中包含了main.js文件。
main.js可以理解爲是程序的入口文件,它的主要作用就是初始化vue實例並使用需要的插件。
這個文件中代碼不多,但是還是有以下幾行代碼不是很理解,今天來一起學習一下。
new Vue({
router,
store,
// render函數的作用就是將App那個vue組件渲染成DOM節點。
// render函數裏面的形參,可以做到這一點,所以 h這個函數 , 裏面傳進去一個App組件。
render: h => h(App)
}).$mount('#app')
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)
理解:
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
}
})
render函數官網解釋: