Vue 中的 Watcher: 时刻追踪数据变化的利器

2023-12-08 23:03:50

在 Vue.js 中，Watcher 扮演着数据变化的监视者的角色，时刻追踪数据变化，一旦数据发生变化，便会触发相应的更新动作，从而实现响应式更新机制。在本文中，我们将深入浅出地探讨 Vue.js 中的 Watcher，揭示其运作原理，并掌握如何使用它来构建响应式应用。

了解 Vue.js 中的响应式系统

在 Vue.js 中，响应式系统是实现数据变化自动更新的核心机制。当数据发生变化时，响应式系统会自动更新受该数据影响的 DOM 元素，从而实现页面的实时响应。

Vue.js 中的响应式系统主要由 Watcher 和 Deps 两个部分组成。Watcher 负责监听数据的变化，而 Deps 则负责收集依赖该数据的 Watcher。当数据发生变化时，Deps 会通知所有依赖它的 Watcher，触发 Watcher 的更新函数，进而更新受该数据影响的 DOM 元素。

深入剖析 Watcher 的工作原理

Watcher 本质上是一个发布-订阅模式。当创建一个新的 Watcher 时，它会将自己注册到与之相关的数据对象（即 Deps）上。当数据发生变化时，Deps 会通知所有已注册的 Watcher，触发 Watcher 的更新函数。

Watcher 的更新函数可以是任何有效的 JavaScript 函数，它可以执行一系列操作，例如更新 DOM 元素、触发其他 Watcher 等。

如何使用 Watcher 创建响应式应用

在 Vue.js 中，有两种主要的方式来创建 Watcher：

使用 Vue 实例的 watch 属性：这种方式可以让你监听 Vue 实例的数据变化。例如：

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      // 当 count 发生变化时，触发此函数
    }
  }
})

使用 Vue.watch 方法：这种方式可以让你监听任何 JavaScript 对象的数据变化。例如：

const count = Vue.observable({
  value: 0
})

const unwatch = Vue.watch(count, (newValue, oldValue) => {
  // 当 count 发生变化时，触发此函数
})

// 停止监听 count 的变化
unwatch()