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

原因

templateUrl使用ajax的方式在運行時加載template，大型應用中數量龐大的組件，以及瀏覽器對請求數量的限制，將導致嚴重的app加載性能問題。
以組件為APP的基礎單元來開發，而不是template

推薦單文件的組件開發

vue中綜合了react(單文件html字符串拼到死)，和angularjs(大量ajax獲取template)，提出my_component.vue的單文件組件開發，將template，style和js集中在一個文件中，利用webpack來構建。目前sublime text已有vue文件的語法高亮插件，同時vue-cli也很給力，分分鐘搭建好基礎結構。這都不是什么事兒了。

打死不用構建工具/webpack

我們也還是有選擇的，雖然官方不推薦，但是也總不能把你打死啊

默默拼串

Vue.component('todo-item',{
props: ['title'],
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
});

使用<script type="x/template">

<script type="text/template" id="tpl">
<div>
<p>hello vue</p>
</div>
</script>

var MyComponent = Vue.extend({
template: '#tpl'
});

最佳實踐

使用.vue單文件開發組件，使用webpack構建

因為templateURL是在運行時通過ajax的方式加載模板，不需要構建步驟為了你分離的文件。開發的時候，這很爽，但是上線部署的時候，你就麻煩了。在HTTP2.0沒有大面積支持前，HTTP的請求數仍然是頁面加載的最關鍵因素。想象一下，在你的網站中，每個組件都是用templateURL，那么頁面出來前，你可能需要加載幾十個HTTP請求?？赡苣悴⒉恢?，大多數的瀏覽器是限制同一域名的并發請求數量的。當你超過這個限額的時候，你頁面的初始渲染時間就得等待每次請求的返回。當然，有工具可以幫助你提前注冊你所有的模板，但是這就多了一個構建步驟，事實上，這就是大型網站的必然趨勢。