基于vue项目的代码优化

最新推荐文章于 2024-09-12 23:30:55 发布

Wonder*

最新推荐文章于 2024-09-12 23:30:55 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接： https://blog.csdn.net/weixin_44427784/article/details/128099536

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

前言

项目上线后其整体性能的优良是用户也是研发人员所关注的。项目优化非常重要，一丝一毫的提升都是对用户的负责。因此我们在开发中就应该注重细节，优化工作从日常开发做起。本篇文章就分享一些在日常开发中代码层面的优化手段。

开发常用优化手段

1、优先使用 v-if

v-if 和 v-show 都可以控制一个元素的显示与隐藏。区别是： v-if 是创建/销毁DOM来实现效果的；v-show 是通过 CSS 的 display 样式来操作的，会预渲染 DOM 。在开发中，除了需要预渲染或者需要频繁切换显示状态的情况，其他情况尽量使用v-if。

2、v-for 和 v-if 不要一起使用

v-for 的优先级在 vue2 中比 v-if 高，所以在 vue2 项目中当两个指令出现在一个 DOM 上时，通过 v-for 渲染列表，每一次都需要进行一次 v-if 的判断。如果列表数据过多，就会造成一定的性能损耗。

解决方案：

① 如果是需要判断是否渲染这个列表，那么我们可以通过在循环外层包裹一层 template 来先进行判断。代码示例如下：

② 如果 v-if 是为了筛选需要遍历的数据，那么我们可以在计算属性中做筛选数据的逻辑，返回一个符合条件的列表数据，并在 DOM 中直接使用这个数据即可。代码示例如下：

3、长列表优化

在项目开发中，很多时候需要列表展示，其数据条数可达上千甚至上万条。

如果数据体量较大，一次性查询会特别慢，影响用户体验，目前的解决方案是分页查询，先查询近20条数据，同时监听滚动条的位置，当发现滚动条滚动到列表底部时继续请求后端接口获取下20条数据。

这种方案能够解决目前查询较慢的问题，但是还有优化的空间，随着不断滚动，数据会越来越多，大量DOM存在难免给客户端造成一定的压力，这时可以考虑虚拟列表的实现方案。

4、及时释放组件资源

及时释放不必要的资源也是一种常见的优化手段。我们在组件中使用定时器 setInterval 时，就会开辟一块资源空间给这个定时器使用，如果销毁组件时不手动释放掉这块空间，那么组件销毁后它们依旧会占用一部分资源。这就导致了没有必要的资源浪费，尤其是整个项目中存在多个这种现象时。所以当一个组件销毁后，尽量把我们开辟出来的资源块也销毁掉。