在官方网站上, 对于 watch 有具体的介绍, 大家能够去好好考究一下官网文档, 上面是我集体对 watch 侦听器的总结
什么是 watch 侦听器?
watch 侦听器: 实质上是一个函数, 监督数据变动, 针对数据的变动做特定的操作 .( 数据名作为办法名即可
)
(注: 所有的侦听器, 都应该被定义在 watch 节点下)
const vm = new Vue({
el: '#app',
data: {username: ''},
watch: {
// 监听 username 值的变动
// newVal 是 "变动后的新值", oldVal 是 "变动之前的旧值"
username(newVal. oldVal) {console.log(newVal. oldVal)
}
}
})
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.log(res)
},
// 示意页面首次渲染好之后,就立刻触发以后的 watch 侦听器
//immediate 选项的默认值是 false
//immediate 的作用是: 管制侦听器是否主动触发一次!
immediate: true
}
}
deep 选项
如果 watch 侦听一个对象, 若对象中的属性值产生了变动, 则无奈被监听到
. 此时须要应用 deep 选项
const vm = new Vue({
el: '#app',
data: {info: { username: 'admin'}
},
watch: {
info: {handler(newVal){console.log(newVal.username)
},
deep: true
}
}
})
- 侦听对象单个属性的变动 , 办法如下 :
```
const vm = new Vue({
el: '#app',
data: {info: { username: 'admin'}
},
// 所有的侦听器, 都应该被定义到 watch 节点下
watch: {
// 如果要侦听器对象子属性的变动, 则必须包裹一层单引号
'info.username':{handler(newVal){console.log(newVal)
}
}
}
})
```
侦听器的格局
1.>办法格局的侦听器
- 毛病 1. : 无奈刚进入页面的时候主动触发!
- 毛病 2. : 如果侦听的是一个对象, 若属性产生了变动 , 不会触发侦听器!
2.>对象格局的侦听器
- 益处 1. : 能够通过 immediate 选项, 让侦听器主动触发!
- 益处 2. : 能够通过 deep 选项, 让侦听器深度监听对象中的每个属性的变动!