vue侦听器 watch

watch侦听器概述

watch：侦听器，监视数据变化，从而针对数据的变化做特定的操作

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

侦听器的格式：

• 方法格式的侦听器

  • 缺点一：无法在刚进入页面的时候自动触发
  • 缺点二：如果侦听的是一个对象，对象里面的属性发生变化时，不会触发侦听器
  • 优点：写法简单，不需要自动触发和深度监听，可使用方法格式的侦听器

• 对象格式的侦听器

  • 优点一：可通过immediate选项，让侦听器在进入页面时自动触发
  • 优点二：可通过deep选项，让侦听器深度监听对象中的每个属性的变化

示例：

方法格式的侦听器

// 方法格式的侦听器
// 语法  小括号内一个形参：变化后的值；两个形参：第一个是变化后的值，第二个是变化之前的值
watch:{
    // 监听username值的变化
    // newVal：变化后的值 oldVal：变化之前的值
    username(newVal,oldVal){
      console.log(newVal, oldVal);
    }
},

对象格式的侦听器

info:{
    username:'admin',
    password:123112
}

// 对象格式的侦听器
watch:{
    info:{
      // 侦听器处理函数
      handler(newVal,oldVal){
        console.log(newVal, oldVal);
      },
      // 在进入页面时触发一次，默认false不触发
      immediate:true，
      // 开启深度监听，监听的对象中的任何一个属性变化了，都会触发侦听器
      deep:true
    }
}

如果只想侦听对象中的某个属性

info:{
    username:'admin',
    password:123112
}
// 如果只想侦听对象中的某个属性
'info.username'(newVal){
    console.log(newVal)
}