Vue 'beforeMount' Lifecycle Hook
Example
Using the beforeMount
and mounted
lifecycle hooks to demonstrate that the component's DOM elements are not available until the mounted
hook.
export default {
data() {
return {
refsObj1: '',
refsObj2: ''
}
},
beforeMount() {
this.refsObj1 = this.$refs; // The $refs object is empty at this point
},
mounted() {
this.refsObj2 = this.$refs;
}
}
Run Example »
Definition and Usage
The beforeMount
lifecycle hook happens right before the component is mounted
, so just before the component is added to the DOM.
Because the component is not mounted
yet, we can access properties inside the component instance such as data
or computed
, but we cannot access the component's DOM elements because they are not mounted yet.
Related Pages
Vue Tutorial: Vue Lifecycle Hooks
Vue Tutorial: The 'beforeMount' Hook
Vue Tutorial: The 'mounted' Hook