Vue 中给 Vue 实例提供了一个 watch 属性，用来设置“侦听器”。

一、基础语法

  1. new Vue({
  2.     watch: {
  3.         侦听的属性名() {
  5.         }
  6.     }
  7. })

说明：侦听器，是用来侦听数据的变化，当侦听的数据发生变化时，就会执行对应的方法。

二、侦听器的参数

每一个侦听器的方法，都可以接收两个参数。语法结构如下：

  1. new Vue({
  2.     watch: {
  3.         侦听的属性名(新值, 旧值) {
  5.         }
  6.     }
  7. })

每一个侦听函数都可以通过参数获取到侦听数据变化前和变化后的值。
例如

  1. new Vue({
  2.     watch: {
  3.         num(newValue, oldValue) {
  5.         }
  6.     }
  7. })

三、引用类型数据的侦听

1、侦听单个的属性

基础语法：

  1. new Vue({
  2.     watch: {
  3.         '对象.属性名'() {
  5.         }
  6.     }
  7. }

2、深度侦听整个对象

基础语法：

  1. new Vue({
  2.     watch: {
  3.         对象名: {
  4.             handler() {
  5.                 // 当侦听的数据发生变化时执行该方法
  6.             },
  7.             deep: true  // 深度侦听
  8.         }
  9.     }
  10. })

四、立即侦听

侦听函数，默认只有在侦听的数据发生变化时才执行。如果我们希望页面刷新一进入时，侦听函数就执行一次，那么就可以将对应的侦听器设置为“立即侦听”。
语法结构：

  1. new Vue({
  2.     watch: {
  3.         对象名: {
  4.             handler() {
  5.                 // 当侦听的数据发生变化时执行该方法
  6.             },
  7.             immediate: true  // 立即侦听
  8.         }
  9.     }
  10. })