1. 前言

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

2. 慕课解释

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

侦听器 watchVue 提供的一种用来观察和响应 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, 对购物车数据进行侦听,每次操作购物车数据时提示用户。
    具体实现如下:
实例演示
预览 复制