这篇文章是翻译的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