一、方法侦听器基本使用
<body>
<div id="app">
<input type="text" v-model="username">
</div>
</body>
<script>
const vm = new Vue({
el:'#app',
data:{
username:''
},
// 侦听器定义在watch下
watch:{
// 监听器本质是函数，监视哪个数据变化，就把数据名作为方法即可
username(newVal,oldVal){
if (newVal === '') return
// 1.调用jquery中的Ajax发起请求，判断newVal是否被占用
$.get('https://www.escook.cn/api/finduser/'+newVal,function (result) {
console.log(result)
})
console.log('监听',newVal,oldVal)
}
}
})
</script>
二、对象格式侦听器
<div id="app">
<input type="text" v-model="username">
</div>
</body>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'admin'
},
watch: {
// 定义对象格式的侦听器
username: {
// 侦听器的处理函数
handler(newVal, oldVal){
console.log(newVal, oldVal)
},
// immediate的默认为false
// 控制监听器是否进入页面立即自动触发一次
immediate:true
}
}
})
</script>
三、深度侦听
<div id="app">
<input type="text" v-model="info.username">
<input type="text" v-model="info.password">
</div>
</body>
<script>
const vm = new Vue({
el:'#app',
data:{
// 用户的信息对象
info:{
username:'admin',
password:'123'
}
},
watch: {
info:{
handler(newVal){
console.log(newVal)
},
// 开启深度监听，只要对象中的任何一个属性变化，都会触发对象的侦听器
deep:true
},
// 如果侦听的是对象的子属性变化，则必须包裹一层单引号
'info.password'(newVal){
console.log(newVal)
}
}
})
</script>
两种侦听器的比较
