Vue 生命周期详解(重点:mounted)

Vue 生命周期详解(重点:mounted

Vue 实例在创建到销毁的过程中,会经历一系列的初始化过程,比如数据的初始化、DOM 的挂载、组件的更新与销毁等。Vue 为我们提供了一组生命周期钩子函数,让我们可以在特定的时机执行自定义代码。

生命周期总体流程(简述)

下面是一个典型的 Vue 实例的生命周期流程:

nginx 复制代码
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

什么是 mounted

mounted 是 Vue 实例生命周期中的一个钩子函数,表示:

当前 Vue 实例已经被挂载到页面中,相关的 DOM 元素也已经被渲染完毕。

换句话说,当 mounted 被调用时,HTML 页面上我们用 Vue 控制的部分已经出现在浏览器上,Vue 可以访问并操作页面中的 DOM 元素,也可以发送网络请求更新数据。


mounted 的常见用途

  1. 发送 AJAX 请求加载页面数据
  2. 初始化第三方插件或图表(如 ECharts、Swiper 等)
  3. 操作 DOM 元素(获取宽高、添加样式等)
  4. 开启定时器或轮询机制
  5. 监听窗口事件(resize、scroll 等)

示例一:在 mounted 中加载用户数据

假设我们要在页面加载后获取用户列表信息,可以在 mounted 中发起请求:

js 复制代码
mounted() {
  axios.get('http://localhost:8080/account/list?page=1&size=2')
    .then(response => {
      this.array = response.data.records;
      this.total = response.data.total;
      this.page = response.data.current;
      this.size = response.data.size;
    })
}

这段代码做了什么?

  • 当页面加载完毕后,自动执行 axios.get(...) 这一请求;
  • 请求的结果用于更新 Vue 实例的 arraytotalpagesize
  • 更新的数据自动绑定到表格和分页控件中,Vue 会响应式更新视图,无需手动操作 DOM。

示例二:和 created 的区别

有人可能会问:为什么不在 created 中发送请求?下面是两者的比较:

钩子函数 执行时机 是否可以访问 DOM 常见用途
created 实例创建后,DOM 未挂载 初始化数据、配置全局状态等
mounted DOM 元素已插入到页面中 发请求、访问 DOM、初始化插件等

简单来说,如果你不需要访问 DOM(只是设置数据),用 created

如果你需要操作页面上的元素(如表格、图表、轮播图等),用 mounted 更安全。


示例三:结合 Vue 模板的真实项目场景

以你的分页表格项目为例,我们在 mounted 中第一次加载第一页的数据。

js 复制代码
mounted() {
  this.loadData(this.page);
},
methods: {
  loadData(currentPage) {
    axios.get(`http://localhost:8080/account/list?page=${currentPage}&size=${this.size}`)
      .then(resp => {
        this.array = resp.data.records;
        this.total = resp.data.total;
        this.page = resp.data.current;
        this.size = resp.data.size;
      })
  }
}

作用:

  • 页面初次加载时自动加载第一页数据;
  • 数据加载完成后,Vue 自动将结果渲染到 <el-table> 表格组件上;
  • 与分页组件联动,切换页码时也重新请求。

补充:其他常用生命周期钩子

钩子函数 含义说明
beforeCreate Vue 实例初始化前调用,无法访问 datamethods
created Vue 实例创建后调用,可以访问 data,但 DOM 未渲染
beforeMount DOM 挂载前调用
mounted DOM 挂载后调用,适合发送请求或初始化 DOM 操作
beforeUpdate 数据更新前调用
updated DOM 更新完成后调用
beforeDestroy 实例销毁前调用
destroyed 实例销毁后调用

小结:mounted 的本质

  • 适用于需要在页面渲染后进行"首次初始化"操作的场景;
  • 比如从后台加载数据、初始化图表、访问 HTML 元素等;
  • mounted 只会执行一次,页面重新加载组件时才会再次触发。
相关推荐
崔庆才丨静觅1 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60612 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了2 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅2 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅2 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅3 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment3 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅3 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊3 小时前
jwt介绍
前端
爱敲代码的小鱼3 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax