面试题答案
一键面试1. 合理利用缓存
- 原理：计算属性具有缓存机制，只有当它依赖的响应式数据发生变化时，才会重新计算。例如，如果计算属性
computedValue依赖于 Vuex 中的state.value1和组件局部状态data.localValue，只有当value1或localValue变化时，computedValue才会重新计算。 - 优化策略：确保计算属性依赖的状态是真正会改变的，避免依赖不必要的响应式数据。例如，如果有一个很少变化的全局配置项，可以将其提取到非响应式变量中，不放在计算属性的依赖里。
2. 拆分复杂计算属性
- 原理：如果一个计算属性逻辑过于复杂，涉及多个 Vuex 状态和局部状态的复杂运算，拆分可以使每个计算属性专注于一个较小的功能模块，降低计算复杂度。比如，一个计算属性原本同时计算订单总价、折扣和运费，拆分后每个计算属性分别处理这些部分。
- 优化策略：分析计算逻辑，将不同功能的计算拆分成多个计算属性。这样，当某个依赖状态变化时，只有相关的计算属性会重新计算，而不是整个复杂的计算属性。
3. 使用 Object.freeze
- 原理：对于 Vuex 中一些不会变化的对象状态，可以使用
Object.freeze冻结该对象。Vue 会在初始化时检测到这个对象是冻结的，从而不会对其进行深度的响应式转换，减少性能开销。当计算属性依赖这个冻结对象时，由于对象不会变化，计算属性也不会因为这个对象而重新计算。 - 优化策略：在 Vuex 的
state中，对于确定不会变化的对象，如应用的配置信息等，使用Object.freeze进行冻结。例如：
const state = {
config: Object.freeze({
theme: 'default',
language: 'zh-CN'
})
};
4. 防抖与节流
- 原理：如果计算属性依赖的某些状态变化频繁，如用户输入等导致的局部状态变化，可以使用防抖或节流来控制计算属性的重新计算频率。防抖是在一定时间内如果再次触发，则重新计时，直到计时结束才执行回调；节流是在一定时间内只执行一次回调。
- 优化策略：例如，如果一个输入框的值变化影响计算属性，并且这个输入框可能会被快速输入，可以对输入事件使用防抖函数。在组件的
mounted钩子中，使用lodash的debounce函数来包裹一个更新计算属性依赖的局部状态的方法：
import { debounce } from 'lodash';
export default {
data() {
return {
inputValue: '',
debouncedUpdate: null
};
},
mounted() {
this.debouncedUpdate = debounce((newValue) => {
this.inputValue = newValue;
}, 300);
},
methods: {
handleInput(event) {
this.debouncedUpdate(event.target.value);
}
}
};
5. 按需加载计算属性
- 原理：对于一些不常用的计算属性，可以采用按需加载的方式。例如，某些复杂的报表数据计算，只有在用户点击查看报表时才需要计算，平时不需要计算，这样可以避免在应用初始化或常规操作时进行不必要的计算。
- 优化策略：将不常用的计算属性定义为方法，当需要使用时再调用该方法进行计算。例如：
export default {
data() {
return {
// 相关数据
};
},
methods: {
calculateComplexData() {
// 复杂计算逻辑
return result;
}
}
};
然后在模板中按需调用：
<template>
<div>
<button @click="showComplexData = true">查看复杂数据</button>
<div v-if="showComplexData">{{ calculateComplexData() }}</div>
</div>
</template>