Vue2 Watch monitoring

In Vue2, we can use watch to monitor a data change and perform some operations when the data changes. This feature is a very powerful function of Vue2, which can help us monitor the changes of one or more data, and then respond accordingly.

watch syntax

To use watch, we need to declare a watch object in the options of the Vue component, as follows:

复制代码
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newCount, oldCount) {
      console.log(`count变成了${newCount}，之前是${oldCount}`)
    }
  }
}

Each property of the watch object is a key-value pair, where the key represents the name of the data to watch, and the value is a function. The parameter of this function contains two values: the new value and the old value, which is triggered when the data changes.

real-time response

The watch listener can be well integrated with Vue's responsive system, allowing us to respond in a timely manner when data changes. For example, when the user enters some text, we can use watch to monitor the value of the input box, and then update some status in real time when the user enters:

复制代码
<input v-model="inputValue" />
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newValue, oldValue) {
      console.log(`输入框的值从${oldValue}变为了${newValue}`)
    }
  }
}

deep monitoring

In Vue2, we can perform deep monitoring through the deep attribute in the prop object. This property defaults to false, which means no in-depth monitoring. If we need to monitor changes in objects or arrays, then we need to set this property to true.

Example:

复制代码
export default {
  props: {
    obj: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    obj: {
      deep: true,
      handler(newObj, oldObj) {
        console.log('obj发生了变化')
      }
    }
  }
}

Cancel watch monitoring

During development, sometimes we need to cancel watch listeners. We can use the $watch method to manually add a watch listener and remove it from the component instance. The first parameter of this method is the name of the data to be monitored, and the second parameter indicates the callback function to be executed.

Example:

复制代码
export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    this.stopWatch = this.$watch('count', (newCount, oldCount) => {
      console.log(`count变成了${newCount}，之前是${oldCount}`)
    })
  },
  methods: {
    stopWatching() {
      this.stopWatch()
    }
  }
}

In the above example, we added a watch listener through the $watch method when the component was created, and saved it to the stopWatch variable. When we need to cancel this listener, we just need to call this variable.

Summarize

Through the watch listener, we can monitor data changes in real time and perform corresponding operations when the data changes. We can also manually add a listener and remove it from the component instance using the $watch method. This is a very powerful function of Vue2, which can help us better manage and maintain data.