Vue3 计算属性和侦听器使用场景

Vue 中的计算属性（computed）和侦听器（watch）有明显的区别和各自的适用场景。

理解何时使用侦听器（watch）和计算属性（computed）可以帮助你更有效地组织 Vue 组件的逻辑。

使用侦听器（watch）的业务场景：

1. 异步操作或副作用：

• • 场景：需要在数据变化时执行异步操作，如调用后端 API 请求数据。
  • 示例：在搜索框中输入关键词时，自动发起异步搜索请求，并更新搜索结果。

1. 复杂数据处理逻辑：

• • 场景：需要根据数据的变化进行复杂的计算或数据处理。
  • 示例：根据用户选择的不同筛选条件动态计算并更新商品列表的显示。

1. 非响应式数据监听：

• • 场景：需