Vue3.0 源码学习——Watch（上）

前端

2023-12-30 10:47:06

Vue3.0 中的 Watch

Vue3.0 中的 Watch 是一种数据侦听机制，它允许我们监听数据源的变化并执行相应的操作。这种机制在构建动态和交互式应用程序时非常有用，因为它可以使应用程序对数据的变化做出响应，并及时更新 UI。

Watch 的工作原理很简单：它需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，Watch 也是惰性的——即回调仅在侦听源发生变化时被调用。这种惰性行为可以防止不必要的重新渲染和计算，从而提高应用程序的性能。

Watch 与 Computed 的区别

Watch 与 Computed 都可以在 Vue3.0 中用于监听数据源的变化，但它们之间存在一些关键的区别。

Watch 是惰性的，而 Computed 是非惰性的。 这意味着 Watch 仅在侦听源发生变化时才会调用回调函数，而 Computed 则会在每次组件重新渲染时重新计算其值。
Watch 可以执行副作用，而 Computed 不能。 这意味着 Watch 可以修改应用程序的状态，而 Computed 只会返回一个值。
Watch 可以侦听任何数据源，而 Computed 只能侦听响应式数据源。 这意味着 Watch 可以侦听诸如数组和对象之类的非响应式数据源，而 Computed 只能侦听响应式数据源。

Watch 的使用

Watch 的使用非常简单，我们可以使用 Vue3.0 中的 watch 选项来实现。watch 选项接受一个对象作为参数，该对象包含要侦听的数据源以及在数据源发生变化时要执行的回调函数。

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      // 在 count 发生变化时执行此回调函数
      console.log(`count changed from ${oldValue} to ${newValue}`)
    }
  }
}