Vue 'beforeMount' Lifecycle Hook
ExampleGet your own Vue Server
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