Vue.js爲何不支持templateUrl模式

這篇文章是翻譯的Vue.js的官方blog，最後加了些本身的理解。

原文地址：Why Vue.js doesn't support templateURL

不少Vue的新手，特別是使用過Angular的都會問「我能不能用 templateURL」,因爲回答了太屢次了，因此做者決定記下來。

Angular的世界裏，templateURL 或者 ng-include 容許使用者在運行時動態的加載遠程模板文件，這個看起來很方便，做爲一個自帶功能，可是讓咱們來從新審視下這個功能。

首先，它容許咱們可以編寫一個分離的html文件做爲模板，這樣子咱們就能在編輯的時候看到正確的語法高亮，這也是不少開發者喜歡的緣由（注：我以爲這是由於如今的人愈來愈懶，愈來愈依賴IDE的緣由）。可是分離你的js和html代碼真的是個好主意麼？在Vue.js的組件中，js和html自然緊耦合，事實上，這些代碼在一個文件更簡單易懂。在2個文件中來回切換上下文邏輯實際上讓開發者更不爽。在vue的概念裏，組件纔是vue.js的基本構建單位，並非模板文件。每個vue.js的模板都伴隨着他的好基友js，分離他們太過於殘忍了。

其次，由於templateURL是在運行時經過ajax的方式加載模板，不須要構建步驟爲了你分離的文件。開發的時候，這很爽，可是上線部署的時候，你就麻煩了。在HTTP2.0沒有大面積支持前，HTTP的請求數仍然是頁面加載的最關鍵因素。想象一下，在你的網站中，每一個組件都是用templateURL，那麼頁面出來前，你可能須要加載幾十個HTTP請求。可能你並不知道，大多數的瀏覽器是限制同一域名的併發請求數量的。當你超過這個限額的時候，你頁面的初始渲染時間就得等待每次請求的返回。固然，有工具能夠幫助你提早註冊你全部的模板，可是這就多了一個構建步驟，事實上，這就是大型網站的必然趨勢。

那麼，在沒有templateURL的狀況下，咱們怎麼處理開發環境問題呢？
在js裏面拼接字符串是很爛的作法，使用 <script type="x/template">這種僞模板也不咋樣。那麼，如今是時候提高技能，使用像Webpack或者Browserify這種流行的模塊構建器了。若是之前沒有使用過，可能有點望而卻步，可是相信我，這會有一個質的飛躍。對於大型網站和系統來講，適當的模塊化很必要。更重要的是，你能夠編寫Vue組件在一個文件中，再加上語法高亮，自定義的預處理器，熱加載，ES6，內置css，自動前置。可讓開發者提升10倍效率。

最後，Vue還能懶加載你的組件，加上使用wabpack很是容易，儘管這是爲了解決一個問---構建頁面文件過於龐大，初始化比較慢，因此你最好仍是分割開來比較好。

拋棄template，擁抱組件世界吧！！

以上是原文的翻譯，並不是徹底直譯，有不少本身的語言，大概意思相同，原諒個人文采不行。

我的以爲，Vue的組件思想跟React類似，把不少東西放在了js（這裏是.vue文件）中，這種作法是把不少緊耦合的東西集中在一塊兒管理，把原來分割開的css,html，js合成在一塊兒，這個很像不少年的作法，因此很贊成玉伯說的，看起來前端是在原地打轉了一圈，開發模式回到了從前的樣子，可是已經螺旋上升了哦，一切都在升級。

經過最近的使用來看，這種component的方式很方便，自然幫你作了解耦的分離，固然你須要轉化本身的思惟模式，不能在用jquery的操做DOM方式，同時和Angular也有不少區別，Vue並不是一個框架，而是更像一個類庫，這樣很靈活，固然也會有人使用很是hack的方式來編寫代碼，可能會很蛋疼，這就須要本身注意了，對於團隊而言，能夠很好的積累各類組件，同時功能切分，合做起來更加容易，就看團隊對Vue的理解程度了。

歡迎你們交流相關技術， 若是對Vue感興趣，能夠加QQ羣： 364912432