[译]为什么Vue不支持templateURL
原文链接
Vue的新用户最常问的一个问题,特别是以前使用Angular的用户,是“我可以使用” templateURL
吗?这个问题我回答过很多次,现在写一个统一回复。
在Angular中,templateURL
或ng-include
允许用户在运行时动态加载远程模板文件。作为Angular的内置功能,这似乎非常方便,但让我们重新考虑一下这种方式解决的问题。
是否有必要将html模板和js分离?
首先,它允许我们在一个单独的HTML文件中编写我们的模板。这在编辑器中给出了正确的语法高亮,这可能是为什么许多人喜欢这样做。但是分割您的JavaScript代码和模板真的是最好的方法吗?对于一个Vue.js组件,它的模板和它的JavaScript是紧密耦合的 - 实际上,如果事情只是在同一个文件,其实更简单。两个文件之间来回跳转的上下文切换实际上使得开发体验变得更糟。在概念上,组件是Vue.js应用程序的基本构建块,而不是模板。每个Vue.js模板都耦合到一个伴随的JavaScript上下文中 - 没有必要将它们分开。
本段大意是:将html模板和js分离,html有语法高亮、代码提示,开发体验好。但是因为html模板和js是紧密耦合的,把它们分开反倒不好。
templateURL会造成多次网络请求,导致加载缓慢
第二,因为templateURL
在运行时通过Ajax加载模板,所以您不需要构建步骤来分割文件。这在开发过程中很方便,但是当您要将其部署到生产中时,这将会非常费力。在普遍支持HTTP / 2之前,HTTP请求的数量仍然是应用程序初始加载性能中最重要的因素。现在想象你使用templateURL
对于您的应用程序中的每个组件 - 浏览器需要执行数十个HTTP请求,甚至可以显示任何内容!如果您不知道,大多数浏览器都会限制它可以对单个服务器执行的并行请求数。当您超过这个限制时,您的应用程序的初始渲染将受到浏览器等待的每次额外往返的影响。当然,有一些构建工具可以帮助您预先注册所有这些模板,$templateCache
但是这给我们展示了一个构建步骤,实际上对于任何严重的前端开发来说是不可避免的。
正确姿势
那么,没有templateURL
,我们如何处理开发体验问题?将模板作为内联JavaScript字符串编写是可怕的,伪造的模板<script type="x/template">
也感觉像一个黑客。那么也许现在是游戏的一部分,并使用像Webpack或Browserify这样的正确的模块捆绑器。如果你以前从来没有处理过这件事,可能看起来很难,但是相信我是值得的。如果要构建任何大型和可维护的组件,则必须正确的模块化。更重要的是,您可以将Vue组件写入单个文件,具有适当的语法突出显示,以及自定义预处理器,热重新加载,ES2015默认情况下的自动翻译和范围CSS,从而使开发体验达到10倍以上的额外优势。
最后,Vue允许您懒惰加载您的组件,并且使用Webpack它很简单。虽然这只是一个问题,当你的初始捆绑是如此之大,以便你更好地分裂它分开。
综上,考虑使用组件,而不是模板。
转载于:https://www.cnblogs.com/weiyinfu/p/7409961.html
[译]为什么Vue不支持templateURL相关推荐
- ant design vue pro 支持多页签模式 页签可以缓存
ant design vue pro 支持多页签模式 页签可以缓存 代码贴在最后 启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
- 如何让一个vue项目支持多语言(vue-i18n) 打包后依然可以修改语言包 并且修改后不需要重新打包
如何让一个vue项目支持多语言(vue-i18n) 1.安装:npm install vue-i18n --save 2.在main.js中引入vue-i18n import VueI18n from ...
- 填个小坑,Vue不支持IE8及以下,跨域ajax不支持IE9
这特么就尴尬了,说好的Vue支持IE8及以下的呢,引入jquery,测试IE个浏览器,IE9仍然显示不正常, 然而命令行测试Vue仍然存在, 数据回不来!数据回不来!数据回不来! 好吧 肉包子打狗$ ...
- Prettier 1.15代码格式化工具新增Angular和Vue.js支持
Prettier 1.15代码格式化工具新增HTML.Vue.js.Angular.MDX支持以及多项语法优化和改进. 对于Angular和Vue,Prettier现在可以格式化这些扩展HTML的框架 ...
- [译]基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
渐进式web应用是大势所趋.越来越多的大公司开始使用这些技术(比如推特:https://mobile.twitter.com/). 想象你可以在地铁中浏览一个web应用,这个应用能够向用户推送通知并且 ...
- 浅谈 SAP UI5 框架对一些其他前端框架比如 Vue 的支持
我们都知道 Fiori 代表 SAP 新一代 UI 的界面风格,而 UI5 是 Fiori UX(User Experience,用户体验)的具体实现技术.从下图这则新闻 能够看出,SAP 决定将 F ...
- Vue如何支持JSX语法
关于我在开发中遇到的这个问题,好像是JSX才支持的语法. 通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法. Vue 的模板实际是编译成了 ...
- vue组件—支持单选或者多选
之前做了一个单页面的单选和多选,这里我整理了一下,封装成组件,能够同时支持单选和多选. 我这里的代码是在vue脚手架(vue-cli)上开发完成的,搭建方法这里就不细说了. 这个组件的名字呢命为 op ...
- [译]Web Inspector开始支持CSS区域
最近,开发人员和设计师们可以在WebKit中尝试使用CSS区域特性了,我们认为是时候给他们一些开发工具了.最新版本的Chrome Canary中的web inspector现在已经支持下面这些功能: ...
最新文章
- java音频库_Java是否为音频_synthesis_内置了库?
- vim 直接跳转到标签
- wdlinux 安装apc扩展
- Iterator 和 for...of 循环
- dataframe数据标准化处理_数据处理中的标准化、归一化究竟是什么?
- Crossoft Minesweeper Hexagon for Mac
- three.js 加载fbx文件并解析
- python分号报错_go、java已经python中分号的使用
- python窗口截图快捷键_python 自定义截图快捷键
- mac android使用WiFi安装应用调试程序
- 中国移动NBIOT卡的几种APN应用场景
- gitlab ce 7部署问题小结
- 用supabase实时数据库替换mapus协作地图里的firebase
- 你可能不知道的JavaScript 遍历DOM的几种方法
- 《日渐崩坏的世界》赏析(1)
- 《Natural Language Processing with Transformers》中示例
- java 读fdb文件_JAVA - Sql解析工具fdb-sql-parser简单使用
- 请求状态为200,前端报系统出错,后端日志报“Content type ‘application/octet-stream‘not supported“错误
- 清北名校光环,消失在互联网
- java自定义对话框弹出
热门文章
- 并发编程(4)同步并发操作
- mysqld --debug-sync
- Eclipse怎样连接并打开oracle等数据库?
- windbg学习22(!dh和!lmi)
- 一年之后 重温旧“梦”
- DB2 SQL Error: SQLCODE=-104, SQLSTATE=42601
- python进阶09并发之五生产者消费者
- Excel、Python靠边站,这才是实现报表自动化最快的方法
- 友商对于鸿蒙系统,谷歌新系统上线!鸿蒙面临生死线考验,华为喊话友商,被小米拒绝...
- linux防火墙为空文件夹,如何记录Linux IPTables防火墙丢弃的数据包到日志文件-linux防火墙设置...