資訊專欄INFORMATION COLUMN
摘要：這種情況稱文檔碎片不過(guò)它已經(jīng)有了屬性。于是，第一個(gè)問題解決，真實(shí)之后，掛載到節(jié)點(diǎn)樹上。關(guān)于第一種寫法實(shí)際是的別名，也是一個(gè)通用慣例。
原文鏈接我的blog，歡迎STAR。
前三篇里，我們開始從render, template, el的渲染DOM樹的優(yōu)先級(jí)，最終都編譯成render函數(shù)，而后得到vnode（虛擬DOM），經(jīng)過(guò)diff算法后，得到真實(shí)DOM。
那么問題來(lái)了？得到真實(shí)DOM以后接下來(lái)該做什么？以及怎么做？
照例，分享一篇文章，vue。（官網(wǎng)，暫時(shí)還沒有找到一篇文章能比較好的解決上述幾個(gè)問題，so，我們帶著問題出發(fā)，直接上官網(wǎng)，然后上源碼。）
我們先解決第一個(gè)問題，得到真實(shí)DOM以后，接下來(lái)該做什么？
相信各位同學(xué)對(duì)原生的創(chuàng)建元素節(jié)點(diǎn)對(duì)象，一定不陌生：
const odiv = document.createElement("div"), 此時(shí)雖然已經(jīng)新創(chuàng)建一個(gè)元素節(jié)點(diǎn)，但它還不是任何一顆DOM節(jié)點(diǎn)樹的組成部分，它只是游蕩在JavaScript世界里的一個(gè)孤兒。這種情況稱文檔碎片（document fragment）,不過(guò)它已經(jīng)有了DOM屬性。接下來(lái)，我們需要把新創(chuàng)建的元素節(jié)點(diǎn)插入DOM節(jié)點(diǎn)樹，parent.appendChild(odiv)。
由此，我們猜想，是不是也要像上述中parent.appendChild(odiv)一樣，插入到DOM節(jié)點(diǎn)樹上？
官網(wǎng)里，有一個(gè)重要的信息：
是的，在Vue里，也需要插入到DOM節(jié)點(diǎn)樹上，并且有一個(gè)名字掛載。
于是，第一個(gè)問題解決，真實(shí)DOM之后，掛載到DOM節(jié)點(diǎn)樹上。
現(xiàn)在來(lái)解決第二個(gè)問題，該怎么掛載到DOM節(jié)點(diǎn)樹上？
存在兩種種方式（一般是在main.js文件中可以看到）：
第一種不存在el選項(xiàng)。
第二種存在el選項(xiàng)。
這有兩個(gè)值得注意的地方：
細(xì)心的同學(xué)，應(yīng)該已經(jīng)發(fā)現(xiàn)上面兩種方法并不只是是否存在el選項(xiàng)的差別，在第一個(gè)方法里，使用的是render: h => h(App), 而第二種使用的是...App。
關(guān)于第一種寫法render: h => h(App),h實(shí)際是createElement的別名，也是一個(gè)通用慣例。至于=>這個(gè)是es6里面的箭頭函數(shù)寫法，所以換一種寫法也就是(不涉及this)：
render: function (createElement) {
return createElement(App)
}
App組件最終也會(huì)編譯成render函數(shù)，從而有vnode。
貼一張官網(wǎng)的圖：
或者使用jsx時(shí)這樣更容易：
- 第二種寫法`...App`,這個(gè)其實(shí)也比較容易理解，`...`是es6擴(kuò)展運(yùn)算符，關(guān)于擴(kuò)展運(yùn)算符不做深入，具體的學(xué)習(xí)，可以參照阮老師寫的[教程](http://es6.ruanyifeng.com/#docs/object)。在這里`...App`的意思是：取出`App`實(shí)例對(duì)象的所有可枚舉屬性，混入全局配置。
或許你還有點(diǎn)疑問，這里既沒有`render`又沒有`template`，如果用掛載DOM元素的HTML用作模板，那必須使用獨(dú)立構(gòu)建的Vue庫(kù)。怎么編譯的？別急，我們來(lái)看App實(shí)例對(duì)象里有些什么可枚舉屬性：
其中有個(gè)`render`方法，于是`render`混入到了`new Vue({})`的配置中。
另一個(gè)值得注意的地方是：
也就是說(shuō)，如果el選項(xiàng)在實(shí)例化時(shí)，沒有作用，且沒有顯示調(diào)用vm.$mount()手動(dòng)開啟編譯時(shí)，是不會(huì)編譯成render函數(shù)的，從而不會(huì)存在vnode。
編譯成render函數(shù)，有真實(shí)DOM以后，插入通過(guò)el選項(xiàng)，或者顯示調(diào)用vm.$mount()手動(dòng)設(shè)置一個(gè)掛載點(diǎn)，掛載到DOM上。
第二個(gè)問題解決。
下一篇，我們深入源碼，看看這個(gè)el與vm.$mount()在搞什么事。
完。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82354.html
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：上周末看這篇文章時(shí)，偶有靈光，所以，分享出來(lái)給大家一起看看前端面試四月二十家前端面試題分享請(qǐng)各位讀者添加一下作者的微信公眾號(hào)，以后有新的文章，將在微信公眾號(hào)直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個(gè)神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，...
摘要：起初，項(xiàng)目使用的是，其提供的方法用著比較爽，由于項(xiàng)目的很多數(shù)據(jù)來(lái)自豆瓣的，直接上簡(jiǎn)單方便，跨域什么的不考慮?？缬騿栴}，上面已經(jīng)介紹，在不能操控的豆瓣數(shù)據(jù)上，使用的是。 項(xiàng)目地址 在線演示 不識(shí)廬山真面目，只緣身在此山中。 大概一個(gè)月前，開源了Vue重構(gòu)豆瓣移動(dòng)端的項(xiàng)目，效果還可以，收到了很多小伙伴的反饋，話說(shuō)是要寫一些文章的，但遲遲沒有動(dòng)筆，估計(jì)小伙伴們等的花都謝了，拖延癥是病，需要治...
閱讀 3409·2022-01-04 14:20
閱讀 3122·2021-09-22 15:08
閱讀 2211·2021-09-03 10:44
閱讀 2326·2019-08-30 15:44
閱讀 1503·2019-08-29 18:40
閱讀 2673·2019-08-29 17:09
閱讀 2998·2019-08-26 13:53
閱讀 3229·2019-08-26 13:37
