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