zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

Vue方法性能 优化 哪些
2023-09-14 09:02:35 时间

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