watch侦听器

一、概念

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名变化发起请求，判断是否可用。

二、用法

<input type="text" class="form-control" v-model.trim="username">

  data() {
    return {
      username: ""
    }
  },
  watch: {
    username(newVal,oldVal) {
      console.log(newVal,oldVal)
    }
  }

三、使用watch检测用户名是否可用

监听username值的变化，并使用axios发起Ajax请求，检测当前输入的用户是否可用：
安装axios：npm i axios -S

<input type="text" class="form-control" v-model.trim="username">

<script>
import axios from 'axios'
export default {
  name: "MyWatch",
  data() {
    return {
      username: ""
    }
  },
  watch: {
    async username(newVal,oldVal) {
      console.log(newVal,oldVal)
      const {data:res} = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
      console.log(res)
    }
  }
}
</script>

四、immediate选项

默认情况下，组件在初次加载后不会调用watch侦听器。如果想watch立即被调用则用immediate选项。

<script>
import axios from 'axios'
export default {
  name: "MyWatch",
  data() {
    return {
      username: "admin"
    }
  },
  watch: {
    username: {
      async handler(newVal,oldVal) {
        const {data:res} = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
        console.log(res)
      },
      //立即触发watch
      immediate: true
    }
  }
}
</script>

五、deep选项（缺点：监听对象全部属性）

当watch侦听的是一个对象，则对象属性值发生变化，无法被监听到。就需要使用deep选项。

<input type="text" class="form-control" v-model.trim="info.username">

<script>
import axios from 'axios'
export default {
  name: "MyWatch",
  data() {
    return {
      username: "admin",
      info: {
        username: '奥特曼'
      }
    }
  },
  watch: {
    info: {
      async handler(newVal) {
        const {data:res} = await axios.get('https://www.escook.cn/api/finduser/' + newVal.username)
        console.log(res)
      },
      deep: true,
    }
  },
}
</script>

六、监听对象中单个属性的变化

<script>
import axios from 'axios'
export default {
  name: "MyWatch",
  data() {
    return {
      username: "admin",
      info: {
        username: '奥特曼',
        password: '123'
      }
    }
  },
  watch: {
    'info.username': {
      async handler(newVal) {
        const {data:res} = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
        console.log(res)
      }
    }
  },
}
</script>

七、计算属性vs侦听器的区别

侧重的应用场景不同：
计算属性：监听多个值变化，最终计算并返回一个新值。
侦听器侧重于监听单个数据的变化，最终执行特定的业务处理哦，不需要任何返回值。