Vue.js项目的优化和改进

本文转自大牛(朱安邦)的网站https://www.axihe.com/map/vue-focus.html


Vue.js 中 ajax 请求放在哪个生命周期中

  • created的时候,视图中的dom并没有渲染出来,所以此时如果直接去操dom节点,无法找到相关的元素。
  • mounted中,由于此时dom已经渲染出来了,所以可以直接操作dom节点。
    一般情况下都放到mounted中,保证逻辑的统一性,因为生命周期是同步执行的,ajax是异步执行的。

编码优化

  1. SPA页面采用keep-alive缓存组件
  2. 拆分组件( 提高复用性、提高代码的可维护性 )
  3. 如果节点需要频繁切换,则使用v-show代替v-if
  4. 使用路由懒加载
  5. 数据持久化的问题(防抖、节流)

Vue加载性能优化

打包优化

  • 使用cdn的方式加载第三方模块

缓存,压缩

  • 客户端缓存、服务端缓存
  • 服务端gzip压缩
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 主要分为三个方面来优化 Vue 代码层面的优化 webpack 配置层面的优化 基础的 Web 技术层面的优化 一...
    alanwhy阅读 4,191评论 0 10
  • AngularJS是什么? AngularJs(简称ng)是一个用于设计动态web应用的结构框架。首先,它是一个框...
    强哥科技兴阅读 5,011评论 0 1
  • 网站优化离不开前后端的互相协作,但是对于前端工程师来说,在保证后端技术方案不变时,能不能只利用前端技术来优化网站呢...
    留七七阅读 11,495评论 0 31
  • 得益于 Vue 的响应式系统和虚拟 DOM 系统,Vue 在渲染组件的过程中能自动追踪数据的依赖,并精确知晓数据更...
    IT小鲍阅读 4,326评论 0 0
  • 又见真颜 文 童强 到宜兴,着实是缘,除了与书法无法割舍的孽缘以外,与恩师秋萍、与紫砂,与群中、老喻、老孔,与诸...
    一的书舍阅读 3,584评论 0 4

友情链接更多精彩内容