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

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 的常见用途

1. 发送 AJAX 请求加载页面数据
2. 初始化第三方插件或图表（如 ECharts、Swiper 等）
3. 操作 DOM 元素（获取宽高、添加样式等）
4. 开启定时器或轮询机制
5. 监听窗口事件（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 只会执行一次，页面重新加载组件时才会再次触发。