当前位置: 首页 > news >正文

Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序

1. mounted 的执行时机

mounted 是组件生命周期中DOM 挂载完成后触发的钩子,具体指:

  • 组件的模板已经被编译为真实 DOM,并插入到页面中。
  • 此时可以通过 this.$el 访问到组件的根 DOM 元素,也能通过 document 或 this.$refs 获取到已渲染的 DOM 节点。

但注意:mounted 仅保证组件自身的 DOM 结构挂载完成,并不直接等同于 “所有子元素 / 指令渲染完成”。

2. v-for 与 mounted 的关系

v-for 用于循环渲染列表,其执行逻辑是:

核心逻辑:mounted 仅与组件自身挂载相关,而 v-for 的渲染时机取决于数据源的更新时机。

  • 在组件渲染阶段(beforeMount 之后、mounted 之前),Vue 会根据 v-for 的数据源(如数组)生成对应的 DOM 节点,并插入到父元素中。
  • 当 mounted 触发时,v-for 循环生成的 DOM 已经存在于页面中(只要数据源在 mounted 之前就已确定)。
  • <template>

    <div>

    <p v-for="(item, index) in list" :key="index">{{ item }}</p>

    </div>

    </template>

    <script>

    export default {

    data() {

    return {

    list: ['a', 'b', 'c'] // 初始就有数据

    }

    },

    mounted() {

    // 此时 v-for 生成的 3 个 <p> 标签已经存在于 DOM 中

    console.log(this.$el.querySelectorAll('p').length) // 输出 3

    }

    }

    </script>

  • 此时 mounted 中可以正常获取到 v-for 渲染的 DOM,因为数据源 list 在组件初始化时就已确定,v-for 在 mounted 前已完成渲染。

    3. 可能出现的 “不同步” 情况

    如果 v-for 的数据源是异步获取的(如在 created 中发请求),则会出现 mounted 执行时 v-for 尚未渲染的情况:

  • <script>

    export default {

    data() {

    return {

    list: [] // 初始为空

    }

    },

    created() {

    // 异步获取数据(1 秒后返回)

    setTimeout(() => {

    this.list = ['a', 'b', 'c']

    }, 1000)

    },

    mounted() {

    // 此时 list 还是空数组,v-for 未渲染任何 DOM

    console.log(this.$el.querySelectorAll('p').length) // 输出 0

    }

    }

    </script>

  • 原因:mounted 在组件挂载后立即执行(约在代码运行后 0ms),而 v-for 的数据源在 1000ms 后才更新,因此 mounted 中无法获取到异步数据渲染的 DOM。

  • 总结

  • 若 v-for 的数据源是同步数据(初始就有),mounted 执行时 v-for 已经渲染完成,可直接操作 DOM。
  • 若 v-for 的数据源是异步数据mounted 执行时可能尚未渲染,需用 $nextTick 或 watch 确保 DOM 已更新。

http://www.lryc.cn/news/583660.html

相关文章:

  • 深度学习遇到的问题
  • 射频信号(大宽高比)时频图目标检测anchors配置
  • 基于DeepSeek构建的openGauss AI智能优化助手:数据库性能提升新利器
  • vscode 防止linux索引爆红
  • AI智能体记忆架构的革命:LangGraph中的分层记忆系统实现
  • vue3面试题(个人笔记)
  • Flutter基础(前端教程⑧-数据模型)
  • vue快速上手
  • 设计模式(行为型)-责任链模式
  • ARM单片机OTA解析(一)
  • whitt算法之特征向量的尺度
  • 数据结构之位图和布隆过滤器
  • 详解CAN总线的位填充机制
  • 数据结构——深度优先搜索与广度优先搜索的实现
  • [附源码+数据库+毕业论]基于Spring Boot+mysql+vue结合内容推荐算法的学生咨询系统
  • RabbitMQ 4.1.1-Local random exchange体验
  • C++如何进行性能优化?
  • 19-C#静态方法与静态类
  • 【WEB】Polar靶场 21-25题 详细笔记
  • 从0开始学习R语言--Day42--LM检验
  • 异地组网
  • 数据分析框架和方法
  • Mac电脑,休眠以后,发现电量一直在减少,而且一个晚上,基本上是没了,开机都需要插电源的简单处理
  • 卫星通信终端天线的5种对星模式之二:功率检测型载波跟踪
  • 【PyTorch】PyTorch中数据准备工作(AI生成)
  • 深度学习——损失函数
  • Hexo + Butterfly + Vercel 完整个人Blog部署指南
  • Flask3.1打造极简CMS系统
  • 自动化Trae Apollo参数解释的批量获取
  • 股权结构解析