面试题答案
一键面试1. 使用 keep - alive 缓存组件
- 原理：
keep - alive是Vue内置的一个抽象组件，它能够在组件切换过程中将被包裹的组件缓存起来，而不是销毁重建。 - 使用方法：在父组件模板中，将需要优化的组件包裹在
keep - alive标签内。例如：
<keep - alive>
<router - view></router - view>
</keep - alive>
这样，当该组件所在路由切换时，组件实例不会被销毁，而是被缓存起来，下次再切换回该路由时，直接从缓存中取出组件实例，避免了重复创建和销毁带来的性能开销。
2. 利用 activated 和 deactivated 钩子函数
activated钩子函数：当被keep - alive缓存的组件激活时调用。在这个钩子函数中，可以执行一些需要在组件每次显示时运行的逻辑，比如恢复组件状态、重新绑定事件等。但要注意避免重复执行一些初始化操作，因为组件并没有真正重新创建。例如：
export default {
activated() {
// 处理DOM操作
this.$el.style.display = 'block';
// 处理事件绑定
window.addEventListener('scroll', this.handleScroll);
}
}
deactivated钩子函数：当被keep - alive缓存的组件停用时调用。在此处可以进行一些清理操作，比如解绑事件、保存组件状态等，防止内存泄漏。例如：
export default {
deactivated() {
// 解绑事件
window.removeEventListener('scroll', this.handleScroll);
// 保存组件状态，例如保存表单数据
this.$store.commit('saveComponentState', this.formData);
}
}
3. 合理缓存组件状态
- 使用
data或computed缓存数据：在组件内部，对于不会随着路由切换而改变的数据，可以在data中定义并缓存，避免每次组件激活时重复计算。对于依赖其他数据且计算逻辑复杂的数据，可以使用computed属性，Vue会对computed进行缓存，只有依赖的数据发生变化时才重新计算。例如：
export default {
data() {
return {
cachedData: null
};
},
computed: {
complexData() {
// 复杂计算逻辑
if (!this.cachedData) {
this.cachedData = this.performComplexCalculation();
}
return this.cachedData;
}
},
methods: {
performComplexCalculation() {
// 复杂计算代码
return result;
}
}
}
- 使用Vuex缓存全局状态：如果组件状态需要与其他组件共享或在整个应用中保持一致性，可以使用Vuex来管理状态。在组件
deactivated时将组件状态提交到Vuex，在activated时从Vuex中获取状态并恢复。例如：
// 在组件中
export default {
activated() {
this.formData = this.$store.state.componentState.formData;
},
deactivated() {
this.$store.commit('saveComponentState', { formData: this.formData });
}
}
4. 避免重复计算
- 防抖和节流：对于组件内频繁触发的事件，如用户输入、滚动等导致的复杂计算，可以使用防抖（
debounce）或节流（throttle）技术。例如，对于一个搜索输入框，当用户输入时触发搜索请求，为了避免短时间内多次触发请求，可以使用防抖函数。
import { debounce } from 'lodash';
export default {
methods: {
search: debounce(function() {
// 搜索逻辑
}, 300)
}
}
- 记忆化（Memoization）：在组件内，如果有一些函数计算开销较大且输入参数不变时结果也不变，可以使用记忆化技术。即缓存函数的计算结果，下次相同输入时直接返回缓存结果。例如：
export default {
methods: {
memoize(func) {
const cache = {};
return function(...args) {
const key = args.toString();
if (!cache[key]) {
cache[key] = func.apply(this, args);
}
return cache[key];
};
},
complexCalculation() {
// 复杂计算逻辑
return result;
}
},
created() {
this.memoizedCalculation = this.memoize(this.complexCalculation);
}
}
5. 处理好与其他组件的交互
- 事件总线（Event Bus）：如果该组件需要与其他组件进行交互，可以使用事件总线。在组件
activated时监听事件，在deactivated时解绑事件，避免重复监听导致的逻辑混乱。例如：
// 创建事件总线
import Vue from 'vue';
export const eventBus = new Vue();
// 在组件中
export default {
activated() {
eventBus.$on('otherComponentEvent', this.handleEvent);
},
deactivated() {
eventBus.$off('otherComponentEvent', this.handleEvent);
},
methods: {
handleEvent(data) {
// 处理其他组件传递的数据
}
}
}
- Vuex状态管理：如前文所述，通过Vuex来共享状态，可以方便地处理组件间的交互。不同组件可以通过提交mutation来修改共享状态，其他依赖该状态的组件会自动更新。例如，一个组件更新了Vuex中的某个状态，另一个被
keep - alive缓存的组件在activated时可以获取到最新状态并更新视图。