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里面拼接字符串是很烂的做法,使用