vue-watch

vue中watch的使用

监听已声明的变量数据是否发生改变，默认当值第一次绑定的时候，不会执行监听函数

使用方法 一：

跟计算属性声明类似

export default {
  data() {
      value: ''
    }
  },
  watch: { 
    // 监听value的值，value发生变化时默认传入两个参数，一个是变化后的值，一个是变化前的值
    value(newValue, oldValue){ 
      console.log(newValue + ' ' + oldValue);
    }
  }
}

使用方法二：

如果需要在最初绑定值的时候也执行监听函数：

export default {
  data() {
      value: ''
    }
  },
  watch: { 
    value: {
      handler(newValue, oldValue) {
        console.log(`${newValue} ${oldValue}`)
      },
      immediate: true  // immediate 为 true 时表示最初绑定值的时候也执行监听函数
    }
  }
}

使用方法三：

当watch监听的是对象时，以上方法不能监听到对象内部属性值的变化，比如当obj.name发送改变时，并不能监听到obj的变化，需要添加deep属性

export default {
  data() {
      value: ''
    }
  },
  watch: { 
    value: {
      handler(newValue, oldValue) {
        console.log(`${newValue} ${oldValue}`)
      },
      immediate: true 
      deep: true  // 深度监听
    }
  }
}