Vue 'beforeUpdate' Lifecycle Hook

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.

Related Pages

Vue Tutorial: Vue Lifecycle Hooks

Vue Tutorial: The 'beforeUpdate' Hook

Vue Tutorial: The 'updated' Hook

Vue Reference: Vue 'updated' Lifecycle Hook