new Vue({ render: h => h(App), }).$mount('#app')

這里創建的vue實例沒有el屬性，而是在實例后面添加了一個$mount(’#app’)方法。

$mount(’#app’) ：手動掛載到id為app的dom中的意思

當Vue實例沒有el屬性時，則該實例尚沒有掛載到某個dom中；
假如需要延遲掛載，可以在之后手動調用vm.$mount()方法來掛載

需要注意的是：該方法是直接掛載到入口文件index.html 的 id=app 的dom 元素上的

 

 

render函數是vue通過js渲染dom結構的函數createElement，約定可以簡寫為h

官方文檔中是這樣的，createElement 是 Vue.js 里面的 函數，
這個函數的作用就是生成一個 VNode節點，
render 函數得到這個 VNode 節點之后，
返回給 Vue.js 的 mount 函數，渲染成真實 DOM 節點，並掛載到根節點上。

 

 

render: h => h(App) 是下面內容的縮寫：

render: function (createElement) {
    return createElement(App);
}

繼續縮寫：

render (createElement) {
    return createElement(App);
}

繼續縮寫：

render (h) {
    return h(App);
}

箭頭函數：

h => h(App);

實際渲染：

import App from './App'
new Vue({
    el: '#root',
    template: '<App></App>',
    components: {
        App
    }
})

 

 

根據 Vue.js 作者 Even You ，h 的含義如下：

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".
它來自術語"hyperscript"，其通常用在 virtual-dom 的實現中。Hyperscript 本身是指 
生成HTML 結構的 script 腳本，因為 HTML 是 hyper-text markup language 的縮寫（超文本標記語言）

 

Vue 在調用 render 方法時，會傳入一個 createElement 函數作為參數，也就是這里的 h 的實參是 createElement 函數，這個函數的作用就是生成一個 VNode節點，render 函數得到這個 VNode 節點之后，調用了 mount 方法，渲染成真實 DOM 節點，並掛載到（通常是div app）節點上。

createElement函數是用來生成HTML DOM元素的，也就是generate HTML structures，也就是Hyperscript，這樣作者才把createElement簡寫成h。h是vue.js里面的createElement函數，這個函數的作用就是生成一個VNode節點，render函數得到這個VNode節點之后，返回給vue.js的mount函數，渲染成真實DOM節點，並掛載到根節點上。