关于vue.js:Vue-什么是watch侦听器

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