面试题：Vue模板语法下复杂条件逻辑处理中计算属性与方法的选择与优化

计算属性

优点：
- 缓存机制：计算属性基于它们的响应式依赖进行缓存。如果依赖的值没有改变，再次访问计算属性时，不会重新计算，而是直接返回缓存的值。在处理复杂条件逻辑且依赖数据变化不频繁时，能显著提高性能。例如，在上述场景中，如果用户登录状态、权限级别和路由信息在一段时间内保持不变，计算属性只需计算一次导航栏内容。
- 简洁易读：将复杂逻辑封装在计算属性中，使得模板代码更加简洁和易于理解。例如在模板中直接使用 {{ dynamicNavBar }}，而 dynamicNavBar 计算属性内部处理了根据各种条件生成导航栏内容的逻辑。
缺点：
- 依赖关系限制：计算属性依赖于响应式数据，如果依赖的数据不是响应式的，计算属性不会自动更新。例如，某些非 Vue 管理的外部库中的数据变化，不会触发计算属性重新计算。
- 调试相对复杂：由于缓存机制，当依赖关系复杂时，调试计算属性的值变化可能相对困难，需要清晰理解依赖关系。

方法

优点：
- 灵活性：方法可以接受参数，在处理不同输入时更加灵活。例如，在动态导航栏场景下，可以传入不同的用户相关数据，根据不同参数生成不同的导航栏内容，而不需要依赖于响应式数据的变化。
- 直接调用：可以在任何需要的地方直接调用，而不像计算属性那样依赖于响应式数据变化。比如在生命周期钩子函数中直接调用方法来获取导航栏内容。
缺点：
- 性能问题：每次调用方法都会执行函数内的逻辑，即使传入的参数和依赖的数据没有变化。在上述复杂条件逻辑场景下，如果频繁调用方法来生成导航栏内容，会消耗较多性能。
- 模板代码冗长：如果在模板中多次调用方法，会使模板代码变得冗长，可读性降低。例如，多次写 {{ getDynamicNavBar() }} 来显示导航栏内容。

优化提升性能

计算属性优化：
- 确保依赖的响应式数据准确，避免不必要的依赖。例如，在动态导航栏场景中，只依赖与导航栏内容真正相关的用户登录状态、权限级别和路由信息，不要引入无关的响应式数据。
- 对于复杂的计算逻辑，可以进一步拆分计算属性，将复杂逻辑分解为多个简单的计算属性，然后在主计算属性中组合使用，这样每个小的计算属性都能利用缓存机制。
方法优化：
- 引入缓存机制，对于相同参数的调用，缓存返回结果。可以使用 WeakMap 等数据结构来实现简单的缓存。例如：

const methodCache = new WeakMap();
export default {
  methods: {
    getDynamicNavBar() {
      const key = JSON.stringify({
        loginStatus: this.loginStatus,
        permissionLevel: this.permissionLevel,
        route: this.$route
      });
      if (methodCache.has(key)) {
        return methodCache.get(key);
      }
      // 复杂逻辑生成导航栏内容
      const navBar = this.generateNavBar();
      methodCache.set(key, navBar);
      return navBar;
    },
    generateNavBar() {
      // 具体生成导航栏逻辑
    }
  }
};

减少方法在模板中的调用次数，尽量将方法调用的结果缓存到数据属性中，然后在模板中使用数据属性。例如，在生命周期钩子函数中调用方法并将结果赋值给数据属性，在模板中使用该数据属性。

星途面试题库

面试题：Vue模板语法下复杂条件逻辑处理中计算属性与方法的选择与优化

知识考点

面试题答案

计算属性

方法

优化提升性能