在官方网站上,对于 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 选项,让侦听器深度监听对象中的每个属性的变动!