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
相关文章
- Vue的生命周期
- VUE-001-在表格单元格(el-table-column)中添加超链接访问
- vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
- vue 实现动态路由
- vue指令:v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)
- vue或uniapp中文本框输入数字固定几位小数或只能输入整数的方法
- Vue-CLI234使用方法:安装和卸载
- vue-cli中安装方法
- Vue数据双向绑定.sync 和v-model
- vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
- 在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
- vue.js中引入图片
- 209:vue+openlayers 绘制矩形,拖拽编辑Modify后仍然为矩形
- 161:vue+openlayers 绘制多边形,限定最小边数4和最大边数6
- 004:vue+openlayers加载OpenStreetMap地图 (示例代码)
- 063:vue+openlayers 绘制自由线段、自由多边形(代码示例)
- Vue项目的打包方式(生成dist文件)
- vue或uniapp中文本框输入数字固定几位小数或只能输入整数的方法
- Vue 中 CSS scoped 的原理
- vue-ant design示例大全——icon与分隔符本地css/js资源