Vue 'beforeUpdate' Lifecycle Hook
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.
Related Pages
Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'beforeUpdate' Hook
Vue Tutorial: The 'updated' Hook
Vue Reference: Vue 'updated' Lifecycle Hook
