什么是 watch 侦听器
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。
语法格式如下:
var vm = new Vue({
el: '#app',
data:{ username:''},
watch:{
//监听 username 值的变化
//newVal 是"变化后的新值",oldVal 是"变化之前的旧值"
username(newVal,oldVal){
console.log(ewVal,oldVal)
}
}
})
使用 watch 检测用户名是否可用
监听 username 值的变化,并使用 axios 发起 Ajax 请求,检测当前输入的用户名是否可用:
watch:{
//监听 username 值的变化
async username(newVal){
if(newVal === '')return
//使用axios发起请求,判断用户名是否可用
const { data:res } = await axios.get('https://www/escook/cn/api/finduser/' + newVal)
console.log(res)
}
}
immediate 选项
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使用 immediate 选项。示例代码如下:
watch: {
username: {
//handler 是固定写法,表示当 username 的值变化时,自动调用 handler 处理函数
handler: async function (newVal) {
if (newVal === '') return
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.logo(res)
},
immediate: ture
}
}
deep 选项
如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选
项,代码示例如下:
var vm = new Vue({
el: '#app',
data: {
info: { username: 'admin' }
},
watch: {
info: {
handler(newVal) {
console.log(newVal.username)
},
deep: ture
}
}
})
监听对象单个属性的变化
如果只想监听对象中单个属性的变化,则可以按照如下的方式定义 watch 侦听器
var vm = new Vue({
el: '#app',
data: {
info: { username: 'admin' }
},
watch: {
'info.username': {
handler(newVal) {
console.log(newVal.username)
}
}
}
})