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