Vue.js為什么不支持templateUrl模式

jopen 9年前發布 | 49K 次閱讀 Vue.js
 

這篇文章是翻譯的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

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!