原文鏈接我的blog缆蝉，歡迎STAR宇葱。
這次想要分享的一篇文章是：從一個奇怪的錯誤出發(fā)理解Vue的基本概念。
這篇文章以Vue的兩種構(gòu)建方式做為切入點刊头，深入探討了Vue的基本概念贝搁，編譯以及掛載的相關(guān)過程。
在這篇文章里學(xué)到很多以前忽略的地方:
- 開始學(xué)習(xí)vue的時候芽偏，由于有一些react基礎(chǔ)，對組件的形式有些了解弦讽，就直接從vue-cli開始了污尉，忽略了vue的兩種構(gòu)建模式膀哲，既是使用默認(rèn)的運行時構(gòu)建。
從vue官網(wǎng)里被碗，可以很清楚的了解某宪，vue存在兩種構(gòu)建模式，運行構(gòu)建和獨立構(gòu)建锐朴。他們的區(qū)別在于獨立構(gòu)建包含模板編譯兴喂，而運行構(gòu)建不含模板編譯。
那么問題來了焚志，在項目那么多組件里衣迷，每個組件都有template選項，既然運行時構(gòu)建不含模板編譯, 那是怎么項目是怎么運行起來酱酬，難道我是使用了假的vue壶谒？？
來看看官網(wǎng)的說明：
運行時構(gòu)建不含模板編譯器膳沽，因此不支持
template選項汗菜，只能用render選項，但即使使用運行時構(gòu)建挑社，在單文件組件中也依然可以寫模板陨界，因為單文件組件的模板在構(gòu)建時預(yù)編譯為render函數(shù)。
瞬間明白了痛阻，原來是render函數(shù)菌瘪，一個考驗JavaScript編程能力的函數(shù)，比template更接近編譯器录平。
那么問題又來了麻车，render函數(shù)與template有什么關(guān)系？
- render 函數(shù)斗这、 template 屬性以及 el屬性动猬。
分享的這篇文章有一點總結(jié)的很好：
當(dāng)Vue選項對象中有
render渲染函數(shù)時，Vue構(gòu)造函數(shù)將直接使用渲染函數(shù)渲染DOM樹表箭，當(dāng)選項對象中沒有render渲染函數(shù)時赁咙，Vue構(gòu)造函數(shù)首先通過將template模板生成render函數(shù)，然后再渲染DOM樹免钻，而當(dāng)選項對象中既沒有render渲染函數(shù)彼水，也沒有template模板時，會通過el屬性獲取掛載元素的outerHTML來作為模板极舔，并編譯生成渲染函數(shù)凤覆。
似曾相識的幾句話……
Vue官網(wǎng)API搜索template：
這里最后一句話，如果Vue選項中包含render函數(shù)拆魏，template選項將被忽略盯桦，也就是說在渲染DOM樹時render函數(shù)的優(yōu)先級 大于 template選項慈俯。
意思也是在進(jìn)行DOM渲染的時候，render函數(shù)優(yōu)先級最高拥峦，template和el次之贴膘。
來看 el：
這里有一個小知識點被忽略： 在實例掛載之后，元素可以用vm.$el訪問（腦補(bǔ)會用到的場景中略号。刑峡。。）
最后一條信息里：
如果
render函數(shù)和template屬性都不存在玄柠，掛在DOM元素的HTML會被提取出來用作模板突梦，此時，必須使用Runtime + Compiler構(gòu)建的Vue庫随闪。
也就是說： 在進(jìn)行DOM樹渲染時阳似，render渲染函數(shù)的優(yōu)先級最高，template次之且需要編譯成渲染函數(shù)铐伴，在前兩者均不存在時撮奏，掛載DOM元素的outerHTML會被提取出來用作模板。
當(dāng)然当宴，構(gòu)建Vue實例時畜吊，可以不含有render, template, el三者中任何一個。
