Vue created 与 mounted 的时间差

问题

Vue 中 created 和 mounted 两个生命周期钩子之间的调用时间差受什么影响？

解答

created 和 mounted 分别在实例创建和挂载的不同阶段被调用，它们之间的时间差主要受以下因素影响：

模板编译时间

Vue 需要将模板转换为渲染函数。如果模板包含大量指令、组件或复杂的嵌套结构，编译过程会更耗时。

// 复杂模板会增加编译时间
export default {
  template: `
    <div>
      <complex-component v-for="item in largeList" :key="item.id">
        <nested-component v-if="condition" />
      </complex-component>
    </div>
  `,
  created() {
    console.time('created-to-mounted');
  },
  mounted() {
    console.timeEnd('created-to-mounted');
  }
}

虚拟 DOM 渲染时间

在 mounted 调用前，Vue 会将虚拟 DOM 渲染为真实 DOM。组件树越复杂、数据绑定越多，渲染时间越长。

export default {
  data() {
    return {
      // 大量数据会增加渲染时间
      items: Array.from({ length: 10000 }, (_, i) => ({ id: i, value: i }))
    }
  }
}

生命周期钩子中的同步操作

created、beforeMount 等钩子中的同步代码会阻塞挂载流程。

export default {
  created() {
    // 耗时的同步操作会延迟 mounted 的触发
    for (let i = 0; i < 1000000; i++) {
      // 复杂计算
    }
  }
}

异步操作的间接影响

created 中的异步操作本身不会阻塞 mounted，但如果异步操作触发了数据更新，可能导致额外的重新渲染。

export default {
  created() {
    // 异步操作不会直接延迟 mounted
    fetch('/api/data').then(data => {
      // 但数据更新可能触发重新渲染
      this.items = data;
    });
  }
}

浏览器性能

设备硬件配置和浏览器性能会影响模板编译和 DOM 渲染的速度。

关键点

• 模板复杂度直接影响编译和渲染时间，应避免过深的组件嵌套
• 生命周期钩子中的同步操作会阻塞挂载流程，耗时操作应异步处理
• 大量数据绑定会增加虚拟 DOM 渲染时间，可使用虚拟滚动等优化手段
• 异步操作不会直接延迟 mounted，但可能触发额外的渲染周期