返回

搞懂Vue中的watch、computed、watchEffect，不再畏惧面试官

前端

Vue中的数据响应式机制：让数据变化与视图更新同步

在Vue中，数据响应式是一个至关重要的概念，它确保了当数据发生变化时，相关的视图会自动更新，从而实现了前端界面的动态性和响应性。要深入理解数据响应式，我们需要了解JavaScript的getter和setter方法在其中的作用。

当一个数据的getter方法被调用时，Vue会自动追踪该数据的依赖关系，并将它们存储在一个名为“dep”的依赖收集器中。当数据的setter方法被调用时，Vue会遍历“dep”中的依赖关系，并触发所有相关的视图进行更新。这种机制使得Vue能够在数据变化时高效地更新视图，无需手动操作。

watch、computed和watchEffect：灵活处理数据变化的利器

为了更灵活地处理数据的变化，Vue提供了三种方式：watch、computed和watchEffect。这三种方式各有特点和使用场景，下面我们来详细了解一下它们的异同：

watch

watch 是一个侦听数据变化的机制。当被侦听的数据发生变化时，watch会触发相应的回调函数，该函数可以是同步或异步的。

使用场景： 当我们需要在数据变化时执行一些操作时，可以使用 watch。例如，我们可以使用 watch 来侦听表单输入的变化，并根据输入的值更新视图。

代码示例：

watch: {
  count: {
    handler(newValue, oldValue) {
      // 做一些事情
    },
    immediate: true // 立即执行回调函数
  }
}

computed

computed 是一个计算属性。computed 属性的返回值是根据其他数据的变化而动态计算得到的。computed 属性的计算结果会缓存，只有当依赖的数据发生变化时，才会重新计算。

使用场景： 当我们需要计算一个值，而该值依赖于其他数据时，可以使用 computed。例如，我们可以使用 computed 来计算一个人的全名，而该全名是由该人的姓和名组成的。

代码示例：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

watchEffect

watchEffect 是 Vue 3 中引入的新特性。它与 watch 类似，都是用于侦听数据变化，但 watchEffect 的回调函数只能是异步的。

使用场景： 当我们需要在数据变化时执行一些异步操作时，可以使用 watchEffect。例如，我们可以使用 watchEffect 来侦听表单输入的变化，并在输入值发生变化后发送一个请求到服务器。

代码示例：

watchEffect(() => {
  // 做一些事情
})

总结：根据需求灵活选择

watch、computed和watchEffect 都是 Vue 中用于处理数据变化的强大工具。它们各有特点和使用场景，我们可以根据自己的需求选择最合适的工具来使用。

watch 适合在数据变化时执行同步操作或立即执行回调函数；computed 适合计算依赖于其他数据的属性，并缓存计算结果；watchEffect 适合执行异步操作或避免立即执行回调函数。

常见问题解答

Q1：为什么需要数据响应式？

A1：数据响应式可以确保视图与数据保持同步，当数据发生变化时，视图会自动更新，无需手动操作，从而简化了开发过程并提高了代码的可维护性。

Q2：watch 和 computed 有什么区别？

A2：watch 侦听数据变化并触发回调函数，而 computed 计算依赖于其他数据的属性。computed 的计算结果会缓存，只有在依赖的数据发生变化时才会重新计算。

Q3：watchEffect 和 watch 有什么区别？

A3：watchEffect 与 watch 类似，但其回调函数只能是异步的。这使得 watchEffect 更适合在数据变化时执行异步操作。

Q4：如何优化数据响应式性能？

A4：我们可以使用以下方法优化数据响应式性能：避免在循环或条件语句中创建 computed 属性；只响应必需的数据变化；合理使用缓存。

Q5：为什么在 Vue 3 中引入了 watchEffect？

A5：watchEffect 是为了解决 Vue 2 中 watch 无法侦听异步数据变化的限制而引入的。它提供了更灵活的方式来处理异步数据，并简化了异步操作的处理。