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;
}
}
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
