關於Vue中的 render: h => h(App) 具體是什么含義?


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

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

進一步縮寫為(ES6 語法):

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

再進一步縮寫為:

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

按照 ES6 箭頭函數的寫法,就得到了:

render: h => h(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 的縮寫(超文本標記語言)


理解:createElement 函數是用來生成 HTML DOM 元素的,也就是上文中的 generate HTML structures,也就是 Hyperscript,這樣作者才把 createElement 簡寫成 h。

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

還有另外一種寫法效果是一樣的:

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


免責聲明!

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



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