本文转自大牛(朱安邦)的网站https://www.axihe.com/map/vue-focus.html
Vue.js 中 ajax 请求放在哪个生命周期中
- 在
created的时候,视图中的dom并没有渲染出来,所以此时如果直接去操dom节点,无法找到相关的元素。 - 在
mounted中,由于此时dom已经渲染出来了,所以可以直接操作dom节点。
一般情况下都放到mounted中,保证逻辑的统一性,因为生命周期是同步执行的,ajax是异步执行的。
编码优化
-
SPA页面采用keep-alive缓存组件 - 拆分组件( 提高复用性、提高代码的可维护性 )
- 如果节点需要频繁切换,则使用
v-show代替v-if。 - 使用路由懒加载
- 数据持久化的问题(防抖、节流)
Vue加载性能优化
- 第三方模块按需导入 (
babel-plugin-component) - 滚动到可视区域动态加载 ( https://tangbc.github.io/vue-virtual-scroll-list )
- 图片懒加载 (https://github.com/hilongjw/vue-lazyload.git)
打包优化
- 使用
cdn的方式加载第三方模块
缓存,压缩
- 客户端缓存、服务端缓存
- 服务端
gzip压缩