Vue中watch监听

在Vue中，watch用于监听Vue实例的数据变化。它可以观察和侦听Vue实例响应式数据的变化。Watch提供两种监听方式：

1. watch的直接监听：直接监听一个简单变量的变化。可以在watch选项中定义一个与监听的变量同名的方法，当监听的变量改变时，该方法会被调用。

export default {
  data(){
    return {
      inputValue: '',
      watchInputValue: ''
    }
  },
  watch: {
    inputValue(newName, oldName){
      this.watchInputValue = newName
    }
  }
}

2. watch的handler函数监听：使用handler函数监听一个简单变量的变化。可以在watch选项中定义一个对象，对象的属性名为监听的变量，属性值为一个handler函数，当监听的变量改变时，该handler函数会被调用。

export default {
  data(){
    return {
      inputValue: '',
      watchInputValue: ''
    }
  },
  watch: {
    inputValue: {
      handler(newName, oldName){
        this.watchInputValue = newName
      }
    }
  }
}

当对象的属性过多时，可以使用deep属性直接对对象进行深度监听。但是如果只想监听对象中的其中一个属性，可以直接使用字符串形式的监听。

export default {
  watch: {
    '对象.属性'(newValue, oldValue){
      console.log(newValue, oldValue)
    }
  }
}