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