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