Vue 'beforeUpdate' Lifecycle Hook — Vue

Example

Using the beforeUpdate lifecycle hook to count how many times an update is triggered.

export default {
  data() {
    return {
      sliderVal: 50,
      renderCount: 0
    }
  },
  beforeUpdate() {
    this.renderCount++;
  }
}

Definition and Usage

The beforeUpdate lifecycle hook happens after Vue's reactive system has detected a change that requires a new rendering, but before that rendering happens.

To avoid an infinite loop we should always consider to use the beforeUpdate lifecycle hook instead of the updated lifecycle hook.

Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'beforeUpdate' Hook
Vue Tutorial: The 'updated' Hook
Vue Reference: Vue 'updated' Lifecycle Hook