Vue-侦听器

Vue-侦听器

• 侦听器

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

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

• immediate 选项：默认情况下，组件在初次加载完毕后不会调用watch 侦听器。如果想让watch 侦听器立即被调用，则需要使 用immediate选项。

  data: {
  	username: 'admin'
  },
  // 所有的侦听器，都应该被定义到 watch 节点下
  watch: {
      // 定义对象格式的侦听器
      username: {
          // 侦听器的处理函数
          handler(newVal, oldVal) {
          	console.log(newVal, oldVal)
      	},
          // immediate 选项的默认值是 false
          // immediate 的作用是：控制侦听器是否自动触发一次！
          immediate: true
      }
  }
  

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

  data: {
      // 用户的信息对象
      info: {
          username: 'admin',
          address: {
          	city: '北京'
          }
      }
  },
  // 所有的侦听器，都应该被定义到 watch 节点下
  watch: {
      info: {
          handler(newVal) {
          	console.log(newVal)
          },
          // 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
          deep: true
      }
  }
  

• 监听对象单个属性的变化

  data: {
      // 用户的信息对象
      info: {
          username: 'admin',
          address: {
          	city: '北京'
          }
      }
  },
  // 所有的侦听器，都应该被定义到 watch 节点下
  watch: {
      // 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
      'info.username'(newVal) {
      	console.log(newVal)
      }
  }