Vue 侦听器
程序员文章站
2022-05-16 21:59:11
...
目录
watch 侦听器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
<body>
<div id="box">
<input type="text" v-model="username">
</div>
<script>
const vm = new Vue({
el: "#box",
data: {
username: '',
},
watch: {
// 监听 username 值的变化
// newVal 是 "变化后的新值", oldVal 是 "变化之前的旧值"
// 要监听哪个数值的变化,就把该数值名作为方法名
// 新值在前,旧值在后
username(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
});
</script>
</body>判断用户名是否被占用
<script>
const vm = new Vue({
el: "#box",
data: {
username: '',
},
watch: {
username(newVal) {
if (newVal == '') return;
// 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用
$.get('https://www.escook.cn/api/finduser/' + newVal, function(result) {
console.log(result);
});
}
}
});
</script>侦听器的格式
方法格式的侦听器
- 缺点：无法再刚进入页面的时候自动触发
- 如果侦听的是对象，那么对象中属性的变化并不会被侦听器接收到
对象格式的侦听器
- 可以通过 immediate 选项，让侦听器自动触发
- 可以通过 deep 选项，让侦听器深度侦听对象中每个属性的变化
对象格式的侦听器
immediate 选项
- 默认值为 false，第一次进入页面不触发侦听器
- 当选项值设为 true 时，第一次进入页面就会触发侦听器
<script>
const vm = new Vue({
el: "#box",
data: {
username: 'admin',
},
watch: {
// 定义对象格式的侦听器
username: {
// 侦听器的处理函数
// 其中 handler 为属性
// 只要侦听到了 username 值的变化，就会自动触发 handler 函数
handler(newVal, oldVal) {
console.log(newVal, oldVal);
},
// immediate 默认值为 false，第一次进入页面并不会触发侦听器
// 选项值设为 true 时，第一次进入页面就会触发一次侦听器
immediate: false,
}
}
});
</script>deep 选项
- 侦听的是对象，但对象中每个属性的变化都会被 "对象侦听器" 所接收到
<script>
const vm = new Vue({
el: "#box",
data: {
info: {
username: 'admin',
address: {
city: '北京',
},
},
},
watch: {
// 如果侦听的是对象，那么对象中属性的变化并不会被侦听器所接收到
info: {
handler(newVal) {
console.log(newVal);
},
// 开启深度监听，对象中任何一个属性的变化都会被 "对象侦听器" 接收到
deep: true,
}
}
});
</script>侦听对象单个属性的变化
- 侦听对象单个属性的变化
<script>
const vm = new Vue({
el: "#box",
data: {
info: {
username: 'admin',
address: {
city: '北京',
},
},
},
watch: {
// 如果要侦听对象单个子属性的变化，则必须包裹一层单引号
'info.username' (newVal) {
console.log(newVal);
}
}
});
</script>