Vue.js为什么不支持templateUrl模式
发布网友
发布时间：2022-04-20 19:17
共1个回答
热心网友
时间：2022-03-30 08:38
首先，它允许我们能够编写一个分离的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合成在一起，这个很像很多年的做法，所以很同意玉伯说的，看起来前端是在原地打转了一圈，开发模式回到了从前的样子，但是已经螺旋上升了哦，一切都在升级。
