vue中的监听器

1. 什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

语法格式如下：

// 所有的侦听器，都应该被定义到 watch 节点下
watch: {
  // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
  // 新值在前，旧值在后
  username(newVal,oldVal) {
    console.log(result,oldVal)
  }
}

2.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: true
} }

3.deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选 项，代码示例如下：

 watch: {
    info: {
       handler(newVal) {
           console.log(newVal)
       },
          // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
       deep: true
    }
} 

4.监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

 watch: {
        // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
        'info.username'(newVal) {
          console.log(newVal)
        }
      }