千锋教育-做有情怀、有良心、有品质的职业教育机构

400-811-9990
手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

上海
  • 北京
  • 郑州
  • 武汉
  • 成都
  • 西安
  • 沈阳
  • 广州
  • 南京
  • 深圳
  • 大连
  • 青岛
  • 杭州
  • 重庆
当前位置:重庆千锋IT培训  >  技术干货  >  Vue的性能优化有哪些方法?

Vue的性能优化有哪些方法?

来源:千锋教育
发布人:lxl
时间: 2023-05-22 11:58:55

Vue的性能优化有哪些方法

  1、路由懒加载

  2、keep-alive缓存页面

  3、使用v-show复用DOM

  4、v-for遍历避免同时使用v-if (使用computed属性过滤需要显示的数据项 )

  5、长列表性能优化

  (1)如果列表是纯粹的数据展示,不会有任何改变,就不需要做响应话, 使用object.freeze(data)

  (2)如果是大数据长列表,可采用虚拟滚动,只渲染少部分区域的内容,参考vue-virtual-scroller、vue-virtual-scroll-list

  6、事件的销毁

  vue组件销毁时,会自动解绑它的全部指令及事件监听,但是仅限于组件本身的限制

  7、图片懒加载

  8、第三方插件按需引入

  像element-ui这样的第三方组件库可以按需引入避免体积太大。

  9、无状态的组件标记为函数式组件

<template functional>
<div class='cell'>
<div v-if="props.value" class="on"></div>
<section v-else class="off"></section>
</div>
</template>

<script>
export defalut {
props: ['value']
}
</script>

   10、SSR

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

猜你喜欢LIKE

如何进行mysql数据备份?

2023-05-30

从零开始学Java之Java中的内部类是怎么回事?

2023-05-29

什么是事件流以及事件流的传播机制 ?

2023-05-29

最新文章NEW

什么是servlet的生命周期?servlet请求处理流程是怎样的?

2023-05-30

在java中,super关键字怎样使用

2023-05-29

什么是JavaScript伪数组?

2023-05-25

相关推荐HOT

更多>>

快速通道 更多>>

最新开班信息 更多>>

网友热搜 更多>>