Vue.js 中如何使用 Watch 监听数据变化-JavaScript中文网-JavaScript教程资源分享门户

使用 Vue.js 进行前端开发的过程中，数据是至关重要的，我们需要在数据变化时及时更新视图以保证用户界面及时响应。Vue.js 提供了一个 Watch API 用于监听数据变化并作出相应的响应，本文将详细介绍如何使用 Watch API。

Watch 基础

Watch API 可以监听 Vue 实例的 data 中的任意数据属性，并且可以在数据属性变化时执行相应的回调函数。比如以下代码将监听 $data.message 的变化并在变化时执行回调函数。

// javascriptcn.com 代码示例
var vm = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed')
    }
  }
})

在上面的例子中，当 message 发生变化时，会触发 watch 中的回调函数，并输出 message changed。

Watch API 还可以监听对象的属性以及数组的变化。对于对象的属性，可以通过 deep 选项开启深度监听。对于数组的变化，Vue.js 提供了一些数组变异方法供我们使用，包括 push, pop, shift, unshift, splice, sort, reverse 等。如果我们需要监听数组的方法操作，可以使用 deep: true 选项开启深度监听。

// javascriptcn.com 代码示例
var vm = new Vue({
  el: '#app',
  data: {
    obj: { a: 1 },
    arr: [1, 2, 3]
  },
  watch: {
    'obj.a': {
      handler: function (newVal, oldVal) {
        console.log('obj.a changed')
      },
      deep: true
    },
    arr: {
      handler: function (newVal, oldVal) {
        console.log('arr changed')
      },
      deep: true
    }
  }
})

Watcher 对象

在 Vue.js 中，每个实例都会有一个 Watcher 对象，Watcher 负责执行数据变化时的回调函数并更新视图。当我们使用 watch API 时，Vue.js 会为我们创建一个 Watcher 对象，然后将它添加到当前实例的订阅列表中。当数据发生变化时，Watcher 会执行回调函数，从而实现数据和视图的双向绑定。

在一些情况下，我们可能需要手动创建 Watcher 对象并进行一些操作，比如在特定的场景下手动触发 Watcher 的回调函数、对 Watcher 进行一些操作、或者手动清除 Watcher。

创建 Watcher 对象的方式如下：

var watcher = new Watcher(vm, expOrFn, cb, options)

其中 vm 表示 Vue 实例对象，expOrFn 表示需要监视的数据变化，cb 是回调函数，options 是一些选项。

Watcher 深入

下面我们将深入探讨 Watcher 对象。Watcher 对象在 Vue.js 内部的实现比较复杂，本文将只讨论一些基本概念和实现方法。

计算属性

在 Vue.js 中，计算属性是一种特殊类型的 Watcher，它内部维护了一个 Dep 对象用于收集依赖，并在相关数据发生变化时更新视图。计算属性可以适用于很多场景，尤其是需要进行复杂计算或需要缓存结果的情况。

下面是一个简单的计算属性示例：

// javascriptcn.com 代码示例
var vm = new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  computed: {
    c: function () {
      return this.a + this.b
    }
  }
})

上面的代码中，c 是一个计算属性，当 a 或 b 发生变化时，会触发 c 的重新计算，并更新视图。

计算属性底层的实现是使用了 Vue.js 内部的 Watcher 对象。当我们创建一个计算属性时，Vue.js 会为我们自动生成一个 Watcher 对象并将其添加到当前实例的订阅列表中。

监听器

除了 Watch API 以外，Vue.js 还提供了一个 Watcher 构造函数用于手动创建 Watcher 对象。

var watcher = new Watcher(vm, function () {
  // 这里是回调函数
})

在某些场景下，我们可能需要手动创建 Watcher 对象。比如在需要监听某个数据的变化并进行一些操作时等等。

渲染 Watcher

Vue.js 在实例化过程中还会为每个组件生成一个渲染 Watcher，它是用来监听模板中数据的变化并实时更新 DOM 的。

我们可以手动创建一个渲染 Watcher，如下所示：

// javascriptcn.com 代码示例
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  render: function (h) {
    return h('div', this.message)
  }
})

new Watcher(vm, function () {
  vm._update(vm._render())
})

上面的代码中，我们手动生成了一个渲染 Watcher，并手动触发了一次 update。这样虽然比较麻烦，但是我们可以更好地理解 Vue.js 的内部实现方式。

总结

本文主要介绍了在 Vue.js 中如何使用 Watch 监听数据变化。我们对 Watch API 进行了详细的介绍，并深入理解了 Watcher 对象的实现。Watcher 在 Vue.js 内部非常重要，是实现数据绑定、计算属性、依赖收集等功能的核心。熟练掌握 Watch API 和 Watcher 对象对我们理解 Vue.js 内部实现非常有帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6539b2de7d4982a6eb32220b