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++;
}
}
Run Example »
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