跳到主要内容

7

1. 前言​

本节介绍侦听器 watch 的使用方法。包括什么是侦听器，侦听器的特点，以及如何对不同类型的数据进行监听。其中重点掌握对不同类型的数据如何使用侦听器，了解它之后，才能在之后的日常开发中熟练运用。

2. 慕课解释​

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。 — 官方定义

侦听器 watch 是 Vue 提供的一种用来观察和响应 Vue 实例上的数据变化的属性。当被侦听的数据发生变化时，会触发对应的侦听函数。

3. 使用侦听器​

前面我们介绍了什么是侦听器 watch，那么如何定义一个侦听器呢？

侦听器 watch 实际是 vue 实例上的一个对象属性。当我们需要对 vue 实例上某个属性进行侦听时，我们以需要被侦听的属性名作为 watch 对象的键，以一个函数 function 作为该键的值。函数 function 接收两个参数：侦听数据变化之后的值newValue；侦听数据变化之前的值oldValue：

var vm = new Vue({
  el: '#app',
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count: function(newVal, oldVal) {
      // 具体处理逻辑
    },
  }
})

代码解释：

第 5 行，我们在 data 中定义了 Number 类型的数据 count。

第 8-12 行，我们在侦听属性 watch 中定义了侦听器 count。

在介绍完如何定义一个侦听器之后，让我们用几个实例来学习一下如何在项目中使用侦听器。

3.1 对字符串、布尔值、数字、数组类型的监听​

假设当前项目中有以下需求，用户的购买商品页面：

  1. 当用户每次修改要购买商品名称的时候，都需要清空购买数量。
  2. 用户添加的数量在必须大于 0，并且当首次出现数量大于 10 的时候弹出数量超额提示，下次超过不再提示。
  3. 购物车数量发生变化时提示用户。

在我们写具体的代码逻辑之前，让我们先来分析一下如何使用侦听器watch来实现需求功能：

  1. 对于需求 1， 我们需要对商品名称进行侦听，当它改变的时候将数量清零。
  2. 对于需求 2， 我们需要对商品数量进行侦听，当商品数量首次超过 10 的时候，弹出对应提示；当商品数量小于 0 的时候，将数量改为 0。
  3. 对于需求 3， 对购物车数据进行侦听，每次操作购物车数据时提示用户。

具体实现如下：