如果你接觸過vue一段時間了,那麼你可能會遇到過rendering
方法在你的app檔案中-- 在最新版本的CLI
中它是一個預設值, 並且是在main.js
檔案中:
new Vue({ render: h => h(App) }).$mount('#app')
或是,如果你使用了render
方法(函數),可能會用JSX:
Vue.component('jsx-example', { render (h) { return <p id="foo">bar</p> } })
或許你想知道,h
是用來幹嘛的?它表示什麼意思呢? h
代表的是 hyperscript 。它是HTML的一部分,表示的是 超文本標記語言:當我們正在處理腳本的時候,在虛擬DOM節點中去使用它進行替換已成為一種慣例。這個定義同時也被運用到其他的框架文件中。詳情請點這裡 Cycle.js。
在這個問題上,Evan 描述到:
Hyperscript 它本身表示的是"生成HTML結構的腳本"
縮寫為h 是因為它更容易去輸入。他還在 Frontend Masters 上描述了這一點 他的高級 Vue 研討會 。
真的,你可以認為它是 createElement
的縮寫。這將是一個長長的形式:
render: function (createElement) { return createElement(App); }
如果我們用h
代替它,那麼我們可以這樣:
render: function (h) { return h(App); }
...然後可以透過使用ES6 縮短:
render: h => h (App)
Vue 版本最多需要三個參數:
render(h) { return h('p', {}, [...]) }
第一種是元素的類型(這裡顯示為p)。
第二個是資料物件。我們在這裡主要包括:props, attrs, dom props, class 和 style.
第三個是一組子節點。然後,我們將巢狀呼叫並最終傳回一個虛擬 DOM 節點樹。
更深入的資訊你可以在 Vue 指南 裡找到。
名稱 hyperscript 可能會讓某些人感到困惑,因為 hyperscript 實際上是 一個庫的名字(這些日子沒有更新 ),它實際上有一個 小的生態系統。在這種情況下,我們不是在談論那個特定的實作。
希望能為那些感到困惑的人解決問題!
推薦教學:《JS》
以上是Vue 的 render 方法中 h 是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!