湛江h5建站制作页培训
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 | 实例销毁后调用 |
小结：mounted 的本质
- 适用于需要在页面渲染后进行“首次初始化”操作的场景；
- 比如从后台加载数据、初始化图表、访问 HTML 元素等；
mounted只会执行一次，页面重新加载组件时才会再次触发。