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

Question

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

Answer 1

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构建

Answer 2

因为templateURL是在运行时通过ajax的方式加载模板，不需要构建步骤为了你分离的文件。开发的时候，这很爽，但是上线部署的时候，你就麻烦了。在HTTP2.0没有大面积支持前，HTTP的请求数仍然是页面加载的最关键因素。想象一下，在你的网站中，每个组件都是用templateURL，那么页面出来前，你可能需要加载几十个HTTP请求。可能你并不知道，大多数的浏览器是限制同一域名的并发请求数量的。当你超过这个限额的时候，你页面的初始渲染时间就得等待每次请求的返回。当然，有工具可以帮助你提前注册你所有的模板，但是这就多了一个构建步骤，事实上，这就是大型网站的必然趋势。