Vue 'beforeMount' Lifecycle 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