Watch

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

监听器函数需要定义到Vue实例的watch节点下

监听器本质上是一个函数，要监听哪个数据的变化，就把数据名作为方法名

方法格式监听

 const app=new Vue({
    el: '#app',
    data:{
      username: ''
    },
    watch:{
     //监听username值得变化
     //newVal是变化后的新值，oldVal是变化之前的旧值
      username(newVal, oldVal){
        console.log(newVal, oldVal)
      }
    }
  })

如果要侦听的是对象的子属性变化，也可以使用方法格式的侦听

  watch:{
  		//如果侦听的是对象的子属性的变化，需要包裹一层单引号
        'info.username'(newVal, oldVal){
          //code
        }
    }

方法格式的监听器无法在刚进入页面时自动触发

对象格式监听

默认情况下，组件在初次加载完毕后不会调用watch侦听器

如果想让watch立即被调用，需要使用immediate选项

  watch:{
      username: {
      //handler是固定写法，表示当username的值变化时，自动调用handler处理函数
        handler(newVal, oldVal){
          //code
        },
      //表示页面初次渲染好之后，就立即触发当前的watch侦听器
      immediate: true
      }
    }

如果监听到的是一个对象，那么对象中的值发生变化不会触发侦听器

此时需要对象格式侦听器中的另一个属性deep开启深度监听

  watch:{
      info: {
      //handler是固定写法，表示当username的值变化时，自动调用handler处理函数
        handler(newVal, oldVal){
          //code
        },
      //开启深度监听，只要对象中任意一个属性变化了，就会触发"对象的侦听器"
      deep: true
      }
    }

每次对象中属性变化都会触发深度监听，此时在对象的监听函数handler中对变化的属性进行处理

标签：username,watch,侦听器,oldVal,handler,监听
来源： https://blog.csdn.net/Raccon_/article/details/122664724