關於一些Vue的文章。（2）

原文連接個人blog，歡迎STAR。

---

此次想要分享的一篇文章是：從一個奇怪的錯誤出發理解Vue的基本概念。

這篇文章以Vue的兩種構建方式作爲切入點，深刻探討了Vue的基本概念，編譯以及掛載的相關過程。

在這篇文章裏學到不少之前忽略的地方:

• 開始學習vue的時候，因爲有一些react基礎，對組件的形式有些瞭解，就直接從vue-cli開始了，忽略了vue的兩種構建模式，既是使用默認的運行時構建。

從vue官網裏，能夠很清楚的瞭解，vue存在兩種構建模式，運行構建和獨立構建。他們的區別在於獨立構建包含模板編譯，而運行構建不含模板編譯。

那麼問題來了，在項目那麼多組件裏，每一個組件都有template選項，既然運行時構建不含模板編譯, 那是怎麼項目是怎麼運行起來，難道我是使用了假的vue？？

來看看官網的說明：

運行時構建不含模板編譯器，所以不支持template選項，只能用render選項，但即便使用運行時構建，在單文件組件中也依然能夠寫模板，由於單文件組件的模板在構建時預編譯爲render函數。

瞬間明白了，原來是render函數，一個考驗JavaScript編程能力的函數，比template更接近編譯器。

那麼問題又來了，render函數與template有什麼關係？

• render 函數、 template 屬性以及 el屬性。

分享的這篇文章有一點總結的很好：

當Vue選項對象中有render渲染函數時，Vue構造函數將直接使用渲染函數渲染DOM樹，當選項對象中沒有render渲染函數時，Vue構造函數首先經過將template模板生成render函數，而後再渲染DOM樹，而當選項對象中既沒有render渲染函數，也沒有template模板時，會經過el屬性獲取掛載元素的outerHTML來做爲模板，並編譯生成渲染函數。

似曾相識的幾句話……

Vue官網API搜索template：

這裏最後一句話，若是Vue選項中包含render函數，template選項將被忽略，也就是說在渲染DOM樹時render函數的優先級 大於 template選項。

意思也是在進行DOM渲染的時候，render函數優先級最高，template和el次之。

來看 el：

這裏有一個小知識點被忽略： 在實例掛載以後，元素能夠用vm.$el訪問（腦補會用到的場景中。。。）

最後一條信息裏：

若是render函數和template屬性都不存在，掛在DOM元素的HTML會被提取出來用做模板，此時，必須使用Runtime + Compiler構建的Vue庫。

也就是說： 在進行DOM樹渲染時，render渲染函數的優先級最高，template次之且須要編譯成渲染函數，在前二者均不存在時，掛載DOM元素的outerHTML會被提取出來用做模板。

固然，構建Vue實例時，能夠不含有render, template, el三者中任何一個。