前端每日一练：区别比较：watch 和 computed

1. 实现方式：

• Computed：计算属性是基于 Vue 的响应式系统来实现的，它会自动追踪其依赖的响应式数据，并在必要时重新计算。计算属性具有缓存机制，只有在其依赖的数据发生变化时才会重新计算。

• Watch：监视器是通过显式侦听数据变化来实现的。你可以监视一个或多个数据的变化，并在数据变化时执行自定义的响应操作。Watch 中的回调函数会在依赖数据变化时立即被触发，不具有缓存机制。

2. 适用场景：

• Computed：计算属性通常用于模板中，以便在模板中显示派生数据。它们是无副作用的，只是基于数据的计算，并不会修改数据本身。适合于那些需要基于其他数据计算衍生值的场景。

• Watch：Watch 通常用于监听数据的变化，而不是用于在模板中显示数据。Watch 的回调函数可以执行副作用操作，例如发送网络请求、手动操作 DOM，或执行其他需要的逻辑。适合于那些需要在数据变化时执行异步或其他耗时操作的场景。

3. 同步/异步：

• Computed：计算属性只对同步代码中的依赖做出响应，它们在需要时会立即重新计算。

• Watch：Watch 支持对数据变化后的同步或异步操作，因此在检测到数据变化后，可以立即执行相应的操作，也可以延迟执行。

综上所述，Computed 适用于需要计算衍生值并在模板中显示的场景，而 Watch 更适用于需要在数据变化时执行副作用操作的场景。在选择使用哪种方式时，需要根据具体的业务需求和场景来决定。