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