侦听器
1.当data中为方法属性时
<div id="app">
<input type="text" v-model="username">
</div>
<script src="../vue-2.6.12.js"></script>
<script src="./jquery-v3.6.0.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
username:''
},
watch:{
username(newVal,oldVal){
// console.log("监听到username值的变化",newVal,oldVal);
if(newVal =="") return
$.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
console.log(result);
})
}
}
})
</script>
2.对象格式侦听器
添加属性immediate:true，打开网页时便开始监听
<div id="app">
<input type="text" v-model="username">
</div>
<script src="../vue-2.6.12.js"></script>
<script src="./jquery-v3.6.0.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: '123'
},
watch: {
username: {
handler(newVal, oldVal) {
if (newVal == "") return
$.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
console.log(result);
})
},
immediate:true
}
}
})
</script>
3.深度监听
对象格式的实时监听两种方法
1.添加deep：true属性。
-
写成单引号格式'info.username'。
const app = new Vue({
el: '#app',
data: {
// username: '123'
info:{
username:'admin'
}
},
watch: {
// info:{
//1.
// handler(newVal){
// console.log(newVal);
// },
// deep:true
// }
//2.
'info.username'(newVal){
console.log(newVal);
}
}
})
</script>
总结：
方法格式的侦听器
缺点1：无法在刚进入页面时，自动触发。
缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器。
对象格式的侦听器
优点1：可以通过immediate选项，让侦听器自动触发。
优点2:可以通过deep选项，让侦听器深度监听对象中每个属性的变化。
