vue性能优化

vue性能优化

Posted by Lan on July 13, 2020

性能优化必须要考虑

  • 路由组件懒加载,2种方式
  1. vue异步组件 中的resolve
    component:resolve=>require(['@/path',resolve],resolve)
    
  2. es 中的import
component:()=>import('@/path')


  • v-if/show的合理使用

v-show和v-if的区别是:v-if是懒加载,当状态为true时才会加载,并且为false时不会占用布局空间;v-show是无论状态是true或者是false,都会进行渲染,并对布局占据空间对于在项目中,需要频繁调用,不需要权限的显示隐藏,可以选择使用v-show,可以减少系统的切换开销。

  • for循环item中加key

在列表数据进行遍历渲染时,需要为每一项item设置唯一key值,方便vuejs内部机制精准找到该条列表数据。当state更新时,新的状态值和旧的状态值对比,较快地定位到diff

  • 图片懒加载

图片资源懒加载