如果你接觸過vue一段時間了,那么你可能會遇到過 rendering
方法在你的app文件中 -- 在最新版本的 CLI
中它是一個默認值, 并且是在 main.js
文件中:
new Vue({ render: h => h(App) }).$mount('#app')
或者是,如果你使用了 render
方法(函數(shù)),可能會使用JSX:
Vue.component('jsx-example', { render (h) { return <p id="foo">bar</p> } })
或許你想知道,h
是用來干嘛的?它表示什么意思呢? h
代表的是 hyperscript 。它是HTML的一部分,表示的是 超文本標記語言:當我們正在處理一個腳本的時候,在虛擬DOM節(jié)點中去使用它進行替換已成為一種慣例。這個定義同時也被運用到其他的框架文檔中。詳情點擊這里 Cycle.js。
在這個問題上,Evan 描述到:
Hyperscript 它本身表示的是"生成HTML結(jié)構(gòu)的腳本"
縮寫為 h 是因為它更容易去輸入。 他還在 Frontend Masters 上描述了這一點 他的高級 Vue 研討會 。
真的,你可以認為它是 createElement
的縮寫。 這將是一個長長的形式:
render: function (createElement) { return createElement(App); }
如果我們用 h
代替它,那么我們可以這樣:
render: function (h) { return h(App); }
...然后可以通過使用 ES6 縮短:
render: h => h (App)
Vue 版本最多需要三個參數(shù):
render(h) { return h('p', {}, [...]) }
第一種是元素的類型(這里顯示為 p)。
第二個是數(shù)據(jù)對象。 我們在這里主要包括:props, attrs, dom props, class 和 style.
第三個是一組子節(jié)點。 然后,我們將嵌套調(diào)用并最終返回一個虛擬 DOM 節(jié)點樹。
更深入的信息你可以在 Vue 指南 里找到。
名稱 hyperscript 可能會讓某些人感到困惑,因為 hyperscript 實際上是 一個庫的名字(這些日子沒有更新 ),它實際上有一個 小的生態(tài)系統(tǒng)。 在這種情況下,我們不是在談?wù)撃莻€特定的實現(xiàn)。
以上就是Vue 的 render 方法中 h 是什么?的詳細內(nèi)容,更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章!
分享名稱:Vue中render方法的h是什么意思-創(chuàng)新互聯(lián)
分享網(wǎng)址:http://jinyejixie.com/article30/dcgipo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗、網(wǎng)站設(shè)計公司、動態(tài)網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站內(nèi)鏈、微信公眾號
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)