資訊專欄INFORMATION COLUMN
摘要：原文鏈接我的，歡迎。這次想要分享的一篇文章是從一個奇怪的錯誤出發理解的基本概念。瞬間明白了，原來是函數，一個考驗編程能力的函數，比更接近編譯器。來看這里有一個小知識點被忽略在實例掛載之后，元素可以用訪問腦補會用到的場景中。。。
原文鏈接我的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三者中任何一個。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82330.html
摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...
摘要：，谷歌給的一份性能指南和最佳實踐。目前而言，前端社區有三大框架和。隨后重點講述了和兩大前端框架，給出了大量的文章教程和相關資源列表。我認為，使用函數式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...
摘要：本篇文章主要是我在開發前研究了的單頁面應用，因為需要用到的，所以確保安裝了，建議官網安裝最新的穩定版本。本文章只是和大家探討怎么利用配合做一個單頁面應用，具體關于里面的內容怎么寫并不在本篇文章的介紹范圍。 本篇文章主要是我在開發前研究了webpack+vue.js的單頁面應用，因為需要用到node的npm，所以確保安裝了node，建議官網安裝最新的穩定版本。并且在項目中需要加載一些np...
閱讀 1572·2021-11-25 09:43
閱讀 2476·2019-08-30 15:54
閱讀 2938·2019-08-30 15:53
閱讀 1087·2019-08-30 15:53
閱讀 747·2019-08-30 15:52
閱讀 2538·2019-08-26 13:36
閱讀 807·2019-08-26 12:16
閱讀 1210·2019-08-26 12:13
