watch侦听器

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

基础使用

data: {
  username: 'admin'
},

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

immediate 选项

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

data: {
  username: 'admin'
},

watch: {
  username: {
      // handler是固定写法，表示当username的值发生变化时，自动调用handler函数（侦听器的处理函数）
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      // immediate 选项的默认值是 false
      // immediate 的作用是：控制侦听器是否自动触发一次！
      // 表示页面初次渲染好之后，就立即出发当前的watch侦听器
      immediate: true
  }
}

deep 选项

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

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