面试项目：揭秘 watch 与计算属性差异

好的，请见以下输出：

watch 与计算属性：异同分析

watch 和计算属性都是 Vue.js 中用于响应式数据的特性，但它们在实现方式和适用场景上存在一定差异。

实现方式

• watch 是一个函数，它监视一个或多个数据属性，当这些数据属性发生变化时，watch 函数就会被触发，执行相应的操作。
• 计算属性也是一个函数，但它不会监视数据属性的变化。相反，计算属性会在组件渲染时被计算一次，并将计算结果缓存起来。当组件重新渲染时，计算属性只会重新计算一次，前提是其依赖的数据属性发生了变化。

适用场景

• watch 适用于需要在数据变化时执行异步或开销较大的操作的场景。例如，当用户在输入框中输入文本时，我们需要向服务器发送一个请求来获取相关数据。此时，我们可以使用 watch 来监视输入框中的文本变化，并在文本发生变化时发送请求。
• 计算属性适用于需要在组件渲染时计算一次，并在组件重新渲染时重新计算一次的场景。例如，当我们想要显示一个组件的总价格时，我们可以使用计算属性来计算总价格。当组件重新渲染时，计算属性只会重新计算一次，前提是总价相关的依赖的数据属性发生了变化。

项目案例：巧用 watch 和计算属性优化性能

在实际项目中，我们可以通过合理地使用 watch 和计算属性来优化组件的性能。

案例一：使用 watch 优化数据请求

在电商网站中，我们经常需要在用户输入搜索关键词时，向服务器发送一个请求来获取相关商品的数据。如果我们直接在组件中使用 v-model 来监听输入框中的文本变化，那么每次文本发生变化，组件都会重新渲染一次，从而导致不必要的请求发送。

为了优化性能，我们可以使用 watch 来监听输入框中的文本变化。当文本发生变化时，我们先使用 watch 函数中的一个计时器来延迟发送请求。如果在计时器到期之前，文本又发生了变化，那么我们就取消上一次的请求，并重新启动一个新的计时器。这样，我们可以有效地减少不必要的请求发送，从而提高组件的性能。

案例二：使用计算属性优化组件渲染

在音乐播放器中，我们经常需要显示当前播放歌曲的总时长和已播放时长。如果我们直接在组件中使用 v-model 来监听当前播放时间，那么每次当前播放时间发生变化，组件都会重新渲染一次。

为了优化性能，我们可以使用计算属性来计算总时长和已播放时长。当组件重新渲染时，计算属性只会重新计算一次，前提是总时长或已播放时长相关的依赖的数据属性发生了变化。这样，我们可以有效地减少不必要的组件渲染，从而提高组件的性能。

总结

watch 和计算属性是 Vue.js 中两个非常重要的特性，它们可以帮助我们构建响应式和高效的组件。通过深入理解和熟练运用 watch 和计算属性，我们可以显著提升组件的性能，从而为用户提供更好的体验。