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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,907评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,546评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,705评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,624评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,940评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,371评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,672评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,396评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,069评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,243评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,847评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2 259

推荐阅读更多精彩内容