当前位置：首页 > ops >正文

Vue 生命周期详解（重点：mounted）

ops 2025/6/20 15:53:45

Vue 生命周期详解（重点：`mounted`）

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

生命周期总体流程（简述）

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

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

什么是 `mounted`？

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

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

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

`mounted` 的常见用途

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

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

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

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 实例的 array、total、page 和 size；
更新的数据自动绑定到表格和分页控件中，Vue 会响应式更新视图，无需手动操作 DOM。

示例二：和 `created` 的区别

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

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

简单来说，如果你不需要访问 DOM（只是设置数据），用 created；
如果你需要操作页面上的元素（如表格、图表、轮播图等），用 mounted 更安全。

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

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

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 实例初始化前调用，无法访问 `data` 和 `methods`
created	Vue 实例创建后调用，可以访问 `data`，但 DOM 未渲染
beforeMount	DOM 挂载前调用
mounted	DOM 挂载后调用，适合发送请求或初始化 DOM 操作
beforeUpdate	数据更新前调用
updated	DOM 更新完成后调用
beforeDestroy	实例销毁前调用
destroyed	实例销毁后调用