Vue2.0 render:h => h(App)


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   }

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM