Vue2 mounted 生命周期钩子函数详解

什么是mounted钩子？

在Vue2中，mounted 是Vue组件生命周期中的一个钩子函数。它在组件被挂载到DOM后触发。简单来说，当你的组件已经渲染完成，并且对应的HTML元素已经插入到页面中时，mounted 函数就会被调用。

生命周期中的位置

Vue组件的生命周期可以分为几个阶段，mounted 处于创建阶段的末尾，具体顺序如下：

  1. beforeCreate：组件刚被创建，数据和方法还未初始化。
  2. created：组件实例创建完成，data和methods已经可用，但DOM还未渲染。
  3. beforeMount：组件即将挂载到DOM，但还未开始渲染。
  4. mounted：组件挂载完成，DOM已经渲染好，可以操作DOM元素。
  5. 后续还有 beforeUpdate、updated、beforeDestroy、destroyed等钩子（与更新和销毁相关）。

Vue 生命周期详解

mounted的特点

  • 触发时机：组件的模板已经编译并插入到页面DOM中。
  • 可以做什么：
    • 访问和操作DOM元素（比如通过this.$el 或 document.getElementById）。
    • 初始化第三方库（比如Chart.js、jQuery插件等），因为此时DOM已经可用。
    • 发送异步请求（比如获取后端数据），虽然这也可以在 created 中做，但有些场景需要DOM准备好。
  • 注意事项：
    • mounted 只会在组件初次挂载时触发一次，后续DOM更新不会再次触发。
    • 如果组件被销毁后重新挂载（比如通过 v-if 控制），mounted 会再次执行。

代码示例

以下是一个简单的Vue2组件，展示 mounted 的使用：

Vue.component('my-component', {
  template: `
    <div id="myDiv">
      <p>这是一个组件</p>
    </div>
  `,
  mounted() {
    console.log('组件已挂载！');
    // 访问DOM元素
    const div = this.$el.querySelector('#myDiv');
    console.log(div); // 输出：<div id="myDiv">...</div>
    
    // 修改DOM
    div.style.backgroundColor = 'lightblue';
    
    // 模拟发送异步请求
    setTimeout(() => {
      console.log('模拟数据请求完成！');
    }, 1000);
  }
});

new Vue({
  el: '#app'
});

对应的HTML：

<div id="app">
  <my-component></my-component>
</div>

运行结果

  1. 页面加载后，组件渲染为一个<div>，包含一个<p>标签。
  2. mounted 钩子触发，打印“组件已挂载！”。
  3. 获取DOM元素<div id="myDiv">，并将其背景色改为浅蓝色。
  4. 1秒后打印“模拟数据请求完成！”。

常见使用场景

  1. 操作DOM：比如初始化一个需要DOM元素的插件（像ECharts、Swiper等）。
mounted() {
  const chart = new Chart(this.$el.querySelector('#myChart'), {
    // Chart.js配置
  });
}
  1. 发送异步请求：获取数据并渲染到页面。
mounted() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      this.myData = data; // 更新data中的数据
    });
}
  1. 设置定时器或监听器：在组件挂载后启动定时器或事件监听。
mounted() {
  this.timer = setInterval(() => {
    console.log('定时器运行中...');
  }, 1000);
},
beforeDestroy() {
  clearInterval(this.timer); // 组件销毁前清理定时器
}

注意点

  1. mounted和created的区别？
    • created：数据和方法已初始化，但DOM还未渲染，不能操作DOM。
    • mounted：DOM已渲染，可以操作页面元素。
    • 如果不需要DOM操作，优先用 created，因为它更早触发，性能稍好。
  2. 为什么我的mounted没触发？
    • 检查组件是否正确挂载（比如 v-if 是否为 false）。
    • 确保Vue实例已绑定到DOM（el 或$mount）。
    • 检查是否有语法错误导致组件未渲染。
  3. 可以在mounted里写很多代码吗？
    • 可以，但建议保持简洁。复杂的逻辑尽量抽取到 methods或外部函数中，便于维护。

提示

  • 如果你在 mounted 中操作DOM，记得在 beforeDestroy 中清理（如移除事件监听器、清除定时器），避免内存泄漏。
  • 如果涉及异步数据加载，可能需要处理加载状态（比如显示“加载中”）。
  • 学习生命周期时，可以用 console.log 在每个钩子中打印信息，观察执行顺序。

总结

mounted 是Vue2生命周期中非常常用的钩子，适合在组件挂载到DOM后执行初始化操作，比如DOM操作、插件初始化或异步请求。理解它的触发时机和使用场景，能帮助你更好地编写Vue组件。

posted @ 2025-07-26 10:33  牛奔  阅读(316)  评论(0)    收藏  举报