Question

vue.js为什么在component的template的root标签中不能使用v-for

Answer 1

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的理解程度了。