Vue为什么没有templateUrl

原文地址：https://www.cnblogs.com/wancy86/p/6999318.html

原因

1. templateUrl使用ajax的方式在运行时加载template，大型应用中数量庞大的组件，以及浏览器对请求数量的限制，将导致严重的app加载性能问题。
2. 以组件为APP的基础单元来开发，而不是template

 

推荐单文件的组件开发

vue中综合了react(单文件html字符串拼到死)，和angularjs(大量ajax获取template)，提出my_component.vue的单文件组件开发，将template，style和js集中在一个文件中，利用webpack来构建。目前sublime text已有vue文件的语法高亮插件，同时vue-cli也很给力，分分钟搭建好基础结构。这都不是什么事儿了。

 

如果打死不用构建工具/webpack呢？

我们也还是有选择的，虽然官方不推荐，但是也总不能把你打死啊

1. 默默拼串

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

1. 使用<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构建