Vue beforeMount 生命周期钩子

实例

使用 beforeMount 和 mounted 生命周期钩子来证明组件的 DOM 元素在 mounted 钩子之前是不可用的。

export default {
  data() {
    return {
      refsObj1: '',
      refsObj2: ''
    }
  },
  beforeMount() {
    this.refsObj1 = this.$refs; // The $refs object is empty at this point
  },
  mounted() {
    this.refsObj2 = this.$refs;
  }
}

定义与用法

beforeMount 生命周期钩子发生在组件 mounted 挂载之前，也就是在组件添加到 DOM 之前。

因为组件还没有 mounted 挂载，所以我们可以访问组件实例内部的属性，如 data 或 computed，但我们不能访问组件的 DOM 元素，因为它们还没有挂载。

关联页面

Vue 教程: Vue 生命周期钩子

Vue 教程: beforeMount 钩子

Vue 教程: mounted 钩子