1、什么是watch侦听器？
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：
<body>
<div id="app">
<input type="text" v-model="username">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:''
},
// 所有的侦听器，都应该被定义到watch节点下
// 侦听器本质上是一个函数，要监视那个数据的变化，就把那个数据名作为方法名即可
watch:{
// 监听username值的变化
// newVal是“变化后的新值”，oldVal是“变化之前的旧值”
// 新值在前，旧值在后
username(newVal,oldVal){
console.log('监听到了username值的变化',newVal,oldVal);
}
}
})
</script>
</body>
2、使用watch检测用户名是否可用
监听username值的变化，并使用axios发起Ajax请求，检测当前输入的用户名是否可用。
watch: {
// 监听username值的变化
async username(newVal) {
if (newVal === '') return
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res);
}
}
3、定义对象格式的侦听器
<script>
const vm = new Vue({
el:'#app',
data:{
username:''
},
watch:{
// 定义对象格式的侦听器
username:{
// 侦听器的处理函数
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
// immediate选项的默认值是false
// immediate的作用是：控制侦听器是否自动触发一次
immediate:true
}
}
})
