面试题：Vue模板语法复杂条件逻辑在大型项目中的架构设计与实践

Question

在一个大型Vue项目中，存在大量基于不同业务规则的复杂条件逻辑，分布在各个组件的模板中。请描述你会如何从架构层面进行设计，以确保这些复杂条件逻辑易于维护、扩展且不会降低项目的性能。例如，如何进行条件逻辑的拆分、复用，以及如何与Vuex、Vue Router等工具协同工作。并结合实际案例说明你是如何落地这些设计的。

Answer 1

架构设计思路

1. 拆分条件逻辑
   • 组件化拆分：将复杂条件逻辑按照功能模块拆分成独立的小组件。例如，在电商项目中，商品展示组件里关于商品是否为新品、是否有折扣等条件逻辑，可拆分成 NewProductIndicator 和 DiscountIndicator 组件。这样每个组件专注处理单一的条件逻辑，提高代码的可维护性和复用性。
   • 逻辑函数拆分：对于组件内部的复杂条件逻辑，提取成独立的函数。比如在订单结算组件中，计算运费的复杂逻辑可提取为 calculateShippingFee 函数，在组件的 methods 中调用。
2. 复用条件逻辑
   • Mixin 复用：创建 Mixin 来复用通用的条件逻辑。例如，在多个组件中都需要判断用户是否登录的逻辑，可创建一个 AuthMixin，包含 isLoggedIn 方法。在需要的组件中混入该 Mixin 即可复用逻辑。
   • 工具函数库：将一些常用的条件判断函数封装到工具函数库中。如判断邮箱格式是否正确的 isValidEmail 函数，在涉及用户注册、登录等多个组件中都可使用。
3. 与 Vuex 协同工作
   • 状态管理：将条件逻辑中涉及的共享状态存储在 Vuex 中。例如，在多页面应用中，用户的登录状态是多个组件条件逻辑依赖的，将其存储在 Vuex 的 state 中。组件通过 mapState 辅助函数获取状态，如 computed: { ...mapState(['isLoggedIn']) }，在模板或方法中根据该状态进行条件渲染或逻辑处理。
   • Mutations 和 Actions：复杂条件逻辑中可能涉及状态的变更，通过 Vuex 的 Mutations 和 Actions 来处理。比如在购物车组件中，根据商品数量变化和库存情况判断是否可结算，相关的状态变更通过 Mutations 来提交，异步操作（如查询库存）通过 Actions 处理。
4. 与 Vue Router 协同工作
   • 路由守卫：利用路由守卫来处理与路由相关的条件逻辑。例如，在进入某些需要用户登录的页面时，在 beforeEach 守卫中判断用户是否登录（从 Vuex 获取登录状态），若未登录则重定向到登录页面。
   • 动态路由参数：通过动态路由参数传递条件信息。比如在商品详情页面，根据路由参数判断商品类型，展示不同的详情内容。

实际案例

在一个企业内部管理系统项目中，存在员工信息展示、权限控制等复杂条件逻辑。

1. 拆分与复用
   • 组件拆分：将员工权限相关的条件逻辑拆分成 PermissionIndicator 组件，在员工列表、员工详情等组件中复用，用于展示员工的权限标识。
   • 逻辑函数复用：在用户登录组件和多个需要权限验证的组件中，复用判断用户权限级别的 checkPermissionLevel 函数。
2. 与 Vuex 协同
   • 状态管理：用户的权限信息存储在 Vuex 的 state 中。各个组件通过 mapState 获取权限状态，如在菜单组件中根据用户权限动态显示或隐藏某些菜单项。
   • Mutations 和 Actions：当用户登录成功后，通过 Actions 调用后端接口获取用户权限，然后通过 Mutations 将权限信息更新到 state 中。
3. 与 Vue Router 协同
   • 路由守卫：在 beforeEach 守卫中，根据用户的权限状态（从 Vuex 获取）判断是否允许访问某些页面。例如，普通员工不能访问管理员设置页面，若尝试访问则重定向到首页。
   • 动态路由参数：在员工详情页面，通过路由参数传递员工的部门信息，根据部门信息动态展示不同的部门专属内容。