面试题：Vue计算属性与跨组件通信替代方案的理解

Question

请简要阐述Vue计算属性的特点与使用场景，以及列举至少两种跨组件通信的替代方案并说明其适用场景。

Answer 1

Vue计算属性的特点

1. 缓存特性：计算属性会基于它的依赖进行缓存，只有在它的依赖值发生改变时才会重新计算。这意味着如果依赖不变，多次访问计算属性会直接返回缓存的结果，而不会重复执行函数。例如，在一个购物车应用中，计算商品总价的计算属性，只要商品数量和单价不变，无论多少次获取总价，都不会重新计算。
2. 自动更新：当计算属性依赖的数据发生变化时，计算属性会自动重新计算并更新视图。比如在一个显示用户信息和用户年龄的组件中，年龄是通过出生日期计算得出的计算属性，当出生日期改变时，年龄会自动更新。

Vue计算属性的使用场景

1. 复杂数据计算：当模板中需要展示一些经过复杂计算得到的数据时，使用计算属性可以使模板更简洁。例如，在一个博客应用中，文章的阅读时长可能需要根据文章字数和预估阅读速度计算得出，使用计算属性来处理这种计算逻辑会很合适。
2. 数据过滤：从一个大的数据集合中过滤出符合特定条件的数据。比如在一个任务管理应用中，从所有任务列表中过滤出今天到期的任务，计算属性可以方便地实现这一功能。

跨组件通信的替代方案及适用场景

1. 事件总线（Event Bus）
   • 适用场景：适用于非父子关系且关系较为简单的组件之间通信。例如，在一个小型单页应用中，顶部导航栏组件和页面内容组件之间需要传递一些简单的交互信息，如导航栏切换菜单时通知内容组件进行相应的更新，使用事件总线就很方便。通过创建一个空的Vue实例作为事件总线，在需要发送消息的组件中通过$emit触发事件，在需要接收消息的组件中通过$on监听事件。
2. Vuex
   • 适用场景：适用于大型应用中，多个组件需要共享状态的场景。例如，在一个电商应用中，购物车的商品列表、商品详情页、结算页面等多个组件都需要访问和修改购物车的状态，使用Vuex可以集中管理这些共享状态，使得状态管理更加清晰和可维护。Vuex提供了state（状态）、mutations（修改状态的方法）、actions（异步操作）等概念，通过这些来统一管理和维护应用的状态。