介绍在watch中对一个单独变量、对象中的某个属性、对象整体的监听的一般方法，以及深度监听的方法

定义：watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

一、普通监听方式

1、监听一个变量的值变化

1.1 可以监听到新值、旧值:

<input type="text" placeholder="请输入用户名" v-model="username" />

  data() {
    return {
      username: "",
    };
  },
  watch: {
    username(newValue, oldValue) {
      console.log("旧的值为：", oldValue, "新的值为：", newValue);
    },
  },

//输出结果
旧的值为：  新的值为： 1
旧的值为： 1 新的值为： 12
旧的值为： 12 新的值为： 123

1.2 举例：监听username值的变化，并使用axios发请求，检测当前输入的用户名是否可用

2.监听一个对象中的单个属性值的变化

  data () { return { obj:{ data1:'我是data1的初始值', data2:'我是data2的初始值' } }
  },
  watch:{ 'obj.data1':function(newvalue,oldvalue){ console.log('data1变化前的值：'+oldvalue); console.log('data1变化后的值：'+newvalue); }, 'obj.data2':function(newvalue,oldvalue){ console.log('data2变化前的值：'+oldvalue); console.log('data2变化后的值：'+newvalue); }
  },

二、深度监听

1. immediate

在默认情况下，组件在初次加载完毕后不回调用watch侦听器。如果想让watch侦听器，则需要使用

<span>2.深度监听方式 immediate</span>
    <input
      type="text"
      placeholder="请输入用户名"
      v-model="accountImmediate.username1"
    />

  data() {
    return {
      accountImmediate: {
        username1: "admin",
        password: "123456",
      },
    };
  },

 watch: {
    accountImmediate: {
      handler(newValue) {
        console.log("NEW:", newValue);
      },
      immediate: true,
    },
  },

2.deep

当watch侦听的是一个对象，如果发生变化则无法被监听到。此时需要使用

2.1 这里监听对象的全部属性

 <span>2.深度监听方式 deep</span>
    <input type="text" placeholder="请输入用户名" v-model="account.username1" />

  data() {
    return {
      account: {
        username1: "admin",
        password: "123456",
      },
    };
  },

 watch: {
    account: {
      handler(newValue) {
        console.log("NEW:", newValue);
      },
      deep: true,
    },
  },

2.2 只监听对象的指定的属性

<span>3.只监听对象的指定属性</span>
    <input type="text" placeholder="请输入用户名" v-model="obj.username2" />

 data() {
    return {
        obj: {
          username2: "admin2",
          password: "12345678",
      },
    };
  },

  watch: {
    "obj.username2": {
      handler(newValue, oddValue) {
        console.log("new", newValue, "odd", oddValue);
      },
    },
  },