使用Vue CLI生成一個(gè)項(xiàng)目后，會(huì)在項(xiàng)目根目錄中生成main.js文件，其主要內(nèi)容如下。
new Vue({render: h => h(App),}).$mount(‘#app’)
初學(xué)者往往會(huì)對(duì)上述代碼感到疑惑。這里對(duì)這段代碼進(jìn)行以下解析。
1. Vue實(shí)例化
上述代碼中，使用Vue()構(gòu)造函數(shù)創(chuàng)建Vue應(yīng)用的一個(gè)根實(shí)例。每個(gè)Vue應(yīng)用都必須從一個(gè)根實(shí)例開始。
2. 在選項(xiàng)對(duì)象中指定渲染函數(shù)
實(shí)例化時(shí)應(yīng)該為Vue()構(gòu)造函數(shù)傳入一個(gè)選項(xiàng)對(duì)象，其中可以包含各種各樣的選項(xiàng)，例如el、data、methods、computed、render等等。
render用于指定Vue實(shí)例的渲染函數(shù)，其類型為：(createElement: () => VNode) => VNode，createElement的返回值為VNode，即虛擬節(jié)點(diǎn)。作為Vue生態(tài)系統(tǒng)的慣例，使用h作為createElement的別名。
渲染函數(shù)給出字符串模板的代替方案，可以使開發(fā)者發(fā)揮 JavaScript 最大的編程能力。該渲染函數(shù)接收一個(gè) createElement 方法作為第一個(gè)參數(shù)用來創(chuàng)建虛擬節(jié)點(diǎn)。如果在Vue 選項(xiàng)中存在 render 函數(shù)，則 Vue 構(gòu)造函數(shù)不會(huì)從 template 選項(xiàng)或通過 el 選項(xiàng)指定的掛載元素中提取出的 HTML 模板編譯渲染函數(shù)。
上述代碼中，渲染函數(shù)以ES6箭頭函數(shù)形式給出，如果改用ES5語(yǔ)法，則應(yīng)寫成以下形式：
function(createElement) {return cerateElement(App) //App為從App.vue文件中導(dǎo)入的組件}
3. 掛載Vue實(shí)例
創(chuàng)建Vue實(shí)例后，調(diào)用該實(shí)例的$mount()方法掛載該實(shí)例，并為其傳入元素或選擇器作為參數(shù)，上述代碼中為id選擇器。
如果 Vue 實(shí)例在實(shí)例化時(shí)沒有收到 el 選項(xiàng)，則它處于“未掛載”狀態(tài)，即沒有關(guān)聯(lián)的 DOM 元素。在這種情況下，可以使用 vm.$mount() 手動(dòng)地掛載一個(gè)未掛載的實(shí)例。
