1 new Vue({ 2 3 router, 4 store, 5 //components: { App } vue1.0的寫法 6 render: h => h(App) vue2.0的寫法 7 }).$mount('#app')
render
函數是渲染一個視圖,然后提供給el
掛載,如果沒有render那頁面什么都不會出來
vue.2.0的渲染過程:
1.首先需要了解這是 es 6 的語法,表示 Vue 實例選項對象的 render 方法作為一個函數,接受傳入的參數 h 函數,返回 h(App) 的函數調用結果。
2.其次,Vue 在創建 Vue 實例時,通過調用 render 方法來渲染實例的 DOM 樹。
3.最后,Vue 在調用 render 方法時,會傳入一個 createElement 函數作為參數,也就是這里的 h 的實參是 createElement 函數,然后 createElement 會以 APP 為參數進行調用,關於 createElement 函數的參數說明參見:Element-Arguments
結合一下官方文檔的代碼便可以很清晰的了解Vue2.0 render:h => h(App)的渲染過程。
[官方文檔][1]
:
1 render: function (createElement) { 2 return createElement( 3 'h' + this.level, // tag name 標簽名稱 4 this.$slots.default // 子組件中的陣列 5 ) 6 }