前端面试题：Vue 项目中，你做过哪些性能优化？

大叔爱吃猕猴桃 · 2024-09-07T00:50:21+00:00

在 Vue 项目中，进行性能优化通常包括以下几个方面： 1. 组件优化使用 v-show 替代 v-if：v-show 仅切换 display 属性，而 v-if 会添加和删除 DOM 元素，适用于频繁切换的组件。组件懒加载：利用 Vue 的异步组件加载功能 (defineAsyncCo...

在 Vue 项目中，进行性能优化通常包括以下几个方面：

使用 v-show 替代 v-if：v-show 仅切换 display 属性，而 v-if 会添加和删除 DOM 元素，适用于频繁切换的组件。

组件懒加载：利用 Vue 的异步组件加载功能 (defineAsyncComponent) 或 webpack 的代码分割（dynamic imports）来减少初始加载时间。

   const AsyncComponent = defineAsyncComponent(() =>
     import('./components/AsyncComponent.vue')
   );

   <router-view v-if="componentLoaded" />

避免不必要的重渲染：通过 shouldComponentUpdate 或 computed 属性避免不必要的组件更新。

   computed: {
     filteredItems() {
       return this.items.filter(item => item.active);
     }
   }

使用 computed 代替 methods：computed 是基于依赖的缓存计算结果，而 methods 每次调用都会重新计算。

   computed: {
     itemCount() {
       return this.items.length;
     }
   }

防止不必要的事件触发：使用事件修饰符（如 .stop、.prevent）来优化事件处理。

   <button @click.stop="handleClick">Click Me</button>

节流和防抖：对频繁触发的事件（如滚动、输入）使用节流或防抖技术。

   methods: {
     handleScroll: _.throttle(function() {
       // handle scroll event
     }, 200)
   }

避免直接修改状态：使用 Vuex 的 mutation 和 action 管理状态变更，避免全局状态的不必要更新。

   mutations: {
     setUser(state, user) {
       state.user = user;
     }
   }

使用 v-for 的 key：为 v-for 循环的元素提供唯一的 key，提升渲染性能。

   <div v-for="item in items" :key="item.id">{{ item.name }}</div>

按需加载数据：只在需要时加载数据，避免不必要的 API 请求。

   async mounted() {
     const data = await fetchData();
     this.data = data;
   }

懒加载：对图片和组件使用懒加载技术。

   <img v-lazy="image.url" />