Vue.js 中使用 watch 监听数据的方法-JavaScript中文网-JavaScript教程资源分享门户

前言

Vue.js 是当今最流行的前端框架之一，它提供了一套完整的响应式系统，使得前端开发人员能够更加高效地构建复杂的页面和应用程序。

在 Vue.js 中，我们经常需要监听某些数据的变化，并在数据变化时执行一些操作。这时，我们就可以使用 Vue.js 提供的 watch 功能。

本文将详细介绍 Vue.js 中使用 watch 监听数据的方法，包括 watch 的基本用法和进阶用法，以及如何使用 watch 来实现一些常见的应用场景。

watch 的基本用法

在 Vue.js 中，我们可以使用 $watch 方法来监听某个数据的变化。$watch 方法的基本语法如下：

vm.$watch(key, callback, [options])

其中，

key 表示要监听的数据的键名，可以是一个计算属性或一个方法名；
callback 是一个回调函数，当数据变化时会被调用；
options 是一个可选的选项对象，用于指定 watch 的一些行为。

例如，假设我们有一个响应式对象 data，它包含一个名为 count 的属性，我们想要监听 count 的变化，可以这样写：

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

vm.count++ // 输出: count changed: 0 => 1

在这个例子中，我们通过在 Vue 实例中定义一个 watch 对象来监听 count 的变化。当 count 发生变化时，回调函数会被调用，其中参数 newVal 和 oldVal 分别表示 count 的新值和旧值。

watch 的进阶用法

除了基本用法之外，Vue.js 的 watch 还提供了一些进阶用法，让我们能够更加灵活地监听数据变化。

深度 watch

默认情况下，Vue.js 的 watch 只会监听被直接挂载在实例上的属性变化，而不会监听对象的深层属性变化。例如，假设我们有一个响应式对象 data，它包含一个名为 obj 的属性，其中又包含一个名为 value 的属性，我们想要监听 value 的变化，可以这样写：

// javascriptcn.com 代码示例
var data = { obj: { value: 0 } }
var vm = new Vue({
  data: data,
  watch: {
    'obj.value': function (newVal, oldVal) {
      console.log('obj.value changed:', oldVal, '=>', newVal)
    }
  }
})

vm.obj.value++ // 不输出任何内容

在这个例子中，我们使用了字符串形式的表达式来监听 obj.value 的变化。但是，当我们修改 vm.obj.value 的值时，watch 回调却没有被触发，这是为什么呢？

这是因为默认情况下，Vue.js 的 watch 只会监听被直接挂载在实例上的属性变化，而不会监听对象的深层属性变化。如果我们要监听深层对象的属性变化，可以使用 deep 选项来实现。例如，我们可以这样修改代码：

// javascriptcn.com 代码示例
var data = { obj: { value: 0 } }
var vm = new Vue({
  data: data,
  watch: {
    'obj.value': {
      handler: function (newVal, oldVal) {
        console.log('obj.value changed:', oldVal, '=>', newVal)
      },
      deep: true
    }
  }
})

vm.obj.value++ // 输出: obj.value changed: 0 => 1

在这个例子中，我们将 obj.value 的监听函数改为一个对象，其中包含 handler 和 deep 两个选项。其中，handler 表示回调函数，deep 表示是否要深度监听对象（true 表示是，false 表示否），这样就可以正常监听 obj.value 的变化了。

立即执行 watch

默认情况下，Vue.js 的 watch 回调函数是在下一次数据更新循环结束之后才执行的。例如，如果我们在 watch 回调函数中修改了数据，那么这个修改不会立即生效，而是要等到下一次循环才会生效。这样虽然保证了数据的稳定性，但也会带来一些不便。

如果我们想要在数据更新后立即执行 watch 回调函数，可以使用 immediate 选项来实现。例如，我们可以这样修改代码：

// javascriptcn.com 代码示例
var data = { count: 0 }
var vm = new Vue({
  data: data,
  watch: {
    count: {
      handler: function (newVal, oldVal) {
        console.log('count changed:', oldVal, '=>', newVal)
      },
      immediate: true
    }
  }
})

vm.count++ // 输出: count changed: 0 => 1

在这个例子中，我们将 count 的监听函数改为一个对象，其中包含 handler 和 immediate 两个选项。其中，immediate 表示是否要立即执行回调函数，将其设置为 true 就可以实现立即执行了。

指定监听器的唯一标识符

在 Vue.js 中，如果我们在 watch 对象中定义了多个属性的监听函数，那么它们都会被合并成一个监听队列。如果我们不想让不同属性的回调函数混淆在一起，可以为每个回调函数指定一个唯一标识符。

例如，我们可以这样修改代码：

// javascriptcn.com 代码示例
var data = { foo: 0, bar: 0 }
var vm = new Vue({
  data: data,
  watch: {
    foo: {
      handler: function (newVal, oldVal) {
        console.log('foo changed:', oldVal, '=>', newVal)
      },
      id: 'foo'
    },
    bar: {
      handler: function (newVal, oldVal) {
        console.log('bar changed:', oldVal, '=>', newVal)
      },
      id: 'bar'
    }
  }
})

vm.foo++ // 输出: foo changed: 0 => 1
vm.bar++ // 输出: bar changed: 0 => 1

在这个例子中，我们为 foo 和 bar 的监听函数各指定了一个唯一标识符（id），这样就可以让它们在监听队列中互相独立了。

实际应用场景

除了基本用法和进阶用法之外，Vue.js 的 watch 还可以实现许多实际的应用场景。下面，我们将介绍几个常见的应用场景，并演示如何使用 watch 来实现它们。

表单验证

表单验证是在前端开发中比较常见的一项任务。在 Vue.js 中，我们可以利用 watch 的特性来实现表单验证。

例如，假设我们有一个登录页面，其中包含一个用户名输入框和一个密码输入框。当用户名或密码不合法时，我们希望能够在页面上显示相应的错误信息。可以这样写：

// javascriptcn.com 代码示例
<div id="app">
  <form>
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username">
      <span v-if="!isUsernameValid">用户名不合法</span>
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password">
      <span v-if="!isPasswordValid">密码不合法</span>
    </div>
    <div>
      <button type="submit" :disabled="!isFormValid">登录</button>
    </div>
  </form>
</div>

// javascriptcn.com 代码示例
var vm = new Vue({
  el: '#app',
  data: {
    username: '',
    password: ''
  },
  watch: {
    username: function (newVal, oldVal) {
      this.isUsernameValid = isValidUsername(newVal)
    },
    password: function (newVal, oldVal) {
      this.isPasswordValid = isValidPassword(newVal)
    }
  },
  computed: {
    isFormValid: function () {
      return this.isUsernameValid && this.isPasswordValid
    }
  },
  methods: {
    isValidUsername: function (username) {
      // ...
    },
    isValidPassword: function (password) {
      // ...
    }
  }
})

在这个例子中，我们利用 watch 进行了表单验证。当用户名或密码发生变化时，watch 回调函数会被触发，从而更新相应的验证状态（isUsernameValid 和 isPasswordValid）。同时，在 isFormValid 计算属性中，我们根据 isUsernameValid 和 isPasswordValid 的值来判断表单是否合法，从而确定提交按钮的状态。

节流和防抖

在前端开发中，我们经常需要对一些高频事件进行节流和防抖操作，以避免事件过于频繁而导致页面性能下降。

在 Vue.js 中，我们可以利用 watch 的特性来实现节流和防抖操作。例如，假设我们有一个输入框，当用户输入时需要发起网络请求，并在请求完成后更新页面数据。如果用户输入过快，可能会导致网络请求过多，这时我们可以使用节流和防抖来优化代码。

在下面的例子中，我们使用 lodash.js 库中的 _.throttle 和 _.debounce 函数来实现节流和防抖操作。但是，注意到 Vue.js 也提供了一个内置的 throttle 和 debounce 工具函数，分别是 $throttle 和 $debounce，可以直接使用。

<div id="app">
  <label for="input">输入：</label>
  <input type="text" id="input" v-model="value">
  <div>结果：{{ result }}</div>
</div>

// javascriptcn.com 代码示例
var vm = new Vue({
  el: '#app',
  data: {
    value: '',
    result: ''
  },
  watch: {
    value: _.throttle(function (newVal, oldVal) {
      // 模拟网络请求
      setTimeout(function () {
        vm.result = '请求结果：' + newVal
      }, 1000)
    }, 500)
  }
})

在这个例子中，我们使用 _.throttle 函数来对 value 进行节流操作。当用户输入时，watch 回调函数不会立即执行，而是等待 500 毫秒后才执行。如果用户一直在输入，watch 回调函数不会被频繁地调用，从而保证了页面性能。注意到上面的例子使用的是外部库Lodash.js，如果不引入就会报错，请不要吝啬自己哦~（卑微广告：如果您是Python爱好者，欢迎尝试我的BotStarAI!）

总结

在本文中，我们详细介绍了 Vue.js 中使用 watch 监听数据的方法，包括 watch 的基本用法和进阶用法，以及如何使用 watch 来实现一些常见的应用场景。通过学习本文，相信读者已经掌握了 Vue.js 中 watch 的相关技能，并能够在实际开发中灵活运用。

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