Vue.js 中的 mounted 生命周期钩子：2 万字深度解析

本文链接：https://blog.csdn.net/weixin_63490470/article/details/141268133

Vue.js 中的 `mounted` 生命周期钩子：2 万字深度解析

在 Vue.js 的世界中，mounted 生命周期钩子扮演着至关重要的角色，它标志着组件完成挂载，并与 DOM 元素建立起紧密联系，为我们提供了操作 DOM 元素、获取数据、初始化组件状态等一系列宝贵的机会。

本篇文章将化身一位经验丰富的 Vue.js 开发者，带领大家深入探索 mounted 生命周期钩子的奥秘，从基础概念到进阶技巧，逐一讲解，并结合大量实例，将理论知识与实践应用紧密结合，助你构建稳固的 Vue.js 知识体系，并将其应用于实际项目开发中。

第一部分：初识 `mounted` - 组件挂载的里程碑

第一章：`mounted` 的定义 - 组件与 DOM 的联姻

mounted 生命周期钩子是在 Vue 组件实例完成挂载后触发的回调函数。所谓挂载，指的是将组件的模板编译成真实的 DOM 元素，并将其插入到页面中。

1.1 mounted 的触发时机

当 Vue 实例完成挂载，将模板编译成真实的 DOM 元素并插入到页面中后，mounted 钩子函数就会被调用。
此时，组件的 $el 属性已经指向组件的根 DOM 元素，我们可以通过 $el 属性访问和操作 DOM 元素。

1.2 mounted 的作用

操作 DOM 元素: 在 mounted 钩子函数中，我们可以访问和操作组件的 DOM 元素，例如获取元素尺寸、设置元素样式、添加事件监听器等。
获取数据: 在 mounted 钩子函数中，我们可以发起 AJAX 请求获取数据，并更新组件的数据模型。
初始化组件状态: 在 mounted 钩子函数中，我们可以初始化组件的状态，例如设置默认值、绑定事件等。

第二章：`mounted` 的基本用法 - 简单的开始

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  mounted() {
    console.log('组件已挂载！');
    console.log('组件的根 DOM 元素：', this.$el);
  }
};
</script>

代码解析:

mounted() { ... }: 定义 mounted 生命周期钩子函数。
console.log('组件已挂载！');: 在 mounted 钩子函数中打印日志，表示组件已挂载。
console.log('组件的根 DOM 元素：', this.$el);: 打印组件的根 DOM 元素，此时 this.$el 已经指向组件的根 DOM 元素。

第三章：`mounted` 的常见应用场景 - 实用技巧

3.1 操作 DOM 元素

在 mounted 钩子函数中，我们可以访问和操作组件的 DOM 元素，例如获取元素尺寸、设置元素样式、添加事件监听器等。

<template>
  <div ref="myDiv">
    <p>这是一段文字</p>
  </div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv;
    console.log('div 元素的高度：', myDiv.offsetHeight);
    myDiv.style.backgroundColor = 'lightblue';
  }
};
</script>

代码解析:

ref="myDiv": 使用 ref 属性为 div 元素添加一个引用。
this.$refs.myDiv: 通过 $refs 属性获取到 div 元素的引用。
myDiv.offsetHeight: 获取 div 元素的高度。
myDiv.style.backgroundColor = 'lightblue';: 设置 div 元素的背景颜色。

3.2 获取数据

在 mounted 钩子函数中，我们可以发起 AJAX 请求获取数据，并更新组件的数据模型。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    axios.get('https://api.example.com/message')
      .then(response => {
        this.message = response.data;
      })
      .catch(error => {
        console.error('获取数据失败：', error);
      });
  }
};
</script>

代码解析:

axios.get('https://api.example.com/message'): 使用 axios 库发起 GET 请求获取数据。
this.message = response.data;: 将获取到的数据更新到组件的数据模型中。

3.3 初始化组件状态

在 mounted 钩子函数中，我们可以初始化组件的状态，例如设置默认值、绑定事件等。

<template>
  <div>
    <input type="text" v-model="message">
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.$el.querySelector('input').focus();
  },
  methods: {
    handleClick() {
      alert('你点击了按钮！');
    }
  }
};
</script>

代码解析:

this.$el.querySelector('input').focus();: 在 mounted 钩子函数中，将焦点设置到 input 元素上。

第二部分：`mounted` 的进阶技巧 - 灵活运用，提升效率

第四章：`mounted` 与 `$nextTick` 的配合 - 确保 DOM 更新

在某些情况下，我们需要在 DOM 更新后执行一些操作，例如获取元素的尺寸、位置等。$nextTick 方法可以将回调函数延迟到下次 DOM 更新循环之后执行，确保我们操作的是最新的 DOM 元素。

<template>
  <div ref="myDiv">
    <p>这是一段文字</p>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const myDiv = this.$refs.myDiv;
      console.log('div 元素的高度：', myDiv.offsetHeight);
    });
  }
};
</script>

代码解析:

this.$nextTick(() => { ... });: 使用 $nextTick 方法将回调函数延迟到下次 DOM 更新循环之后执行。

第五章：`mounted` 与 `$refs` 的配合 - 精准操作 DOM

$refs 属性可以获取到组件中使用 ref 属性标记的 DOM 元素或子组件实例，而 $el 可以获取到组件的根 DOM 元素。两者结合使用，可以更加灵活地操作 DOM 元素。

<template>
  <div ref="myDiv">
    <p>这是一段文字</p>
    <button ref="myButton">点击我</button>
  </div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv;
    const myButton = this.$refs.myButton;
    myDiv.style.backgroundColor = 'lightblue';
    myButton.addEventListener('click', () => {
      alert('你点击了按钮！');
    });
  }
};
</script>

代码解析:

ref="myDiv" 和 ref="myButton": 使用 ref 属性为 div 元素和 button 元素添加引用。
this.$refs.myDiv 和 this.$refs.myButton: 通过 $refs 属性获取到 div 元素和 button 元素的引用。

第六章：`mounted` 与 `$emit` 的配合 - 组件间通信

在 mounted 钩子函数中，我们可以使用 $emit 方法触发自定义事件，并将数据作为参数传递给父组件，实现组件之间的通信。

<template>
  <div>
    <my-child @custom-event="handleCustomEvent"></my-child>
  </div>
</template>

<script>
import MyChild from './MyChild.vue';

export default {
  components: {
    MyChild
  },
  methods: {
    handleCustomEvent(message) {
      console.log('接收到子组件的消息：', message);
    }
  }
};
</script>

<!-- MyChild.vue -->
<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello from child!');
    }
  }
};
</script>

代码解析:

@custom-event="handleCustomEvent": 在父组件模板中使用 v-on 指令监听子组件触发的自定义事件。
this.$emit('custom-event', 'Hello from child!');: 在子组件中触发名为 custom-event 的自定义事件，并将 'Hello from child!' 作为参数传递给父组件。

第七章：`mounted` 与 `$destroy` 的配合 - 组件销毁

在 mounted 钩子函数中，我们可以添加一些事件监听器，并在 $destroy 生命周期钩子函数中移除这些监听器，避免内存泄漏。

<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleClick() {
      alert('你点击了按钮！');
    },
    handleResize() {
      console.log('窗口大小发生了变化！');
    }
  }
};
</script>

代码解析:

window.addEventListener('resize', this.handleResize);: 在 mounted 钩子函数中添加窗口大小变化事件监听器。
window.removeEventListener('resize', this.handleResize);: 在 beforeDestroy 钩子函数中移除窗口大小变化事件监听器。

第三部分：`mounted` 的最佳实践 - 规范使用，提升代码质量

第八章：避免在 `mounted` 中进行异步操作

在 mounted 钩子函数中，尽量避免进行异步操作，例如发起 AJAX 请求、使用 setTimeout 或 setInterval 等。因为异步操作可能会导致 DOM 更新延迟，从而影响组件的渲染和交互。

建议:

将异步操作放在 created 生命周期钩子函数中，并在数据获取完成后使用 $nextTick 方法更新 DOM。
使用 async/await 语法简化异步操作。

第九章：避免在 `mounted` 中直接操作子组件的 DOM

在 mounted 钩子函数中，尽量避免直接操作子组件的 DOM 元素。因为子组件的 DOM 结构可能会发生变化，直接操作子组件的 DOM 元素可能会导致代码难以维护。

建议:

使用 props 和 $emit 方法实现组件之间的通信。
使用 $refs 属性获取子组件的实例，并通过子组件的方法或属性进行操作。

第十章：避免在 `mounted` 中进行过多的操作

在 mounted 钩子函数中，尽量避免进行过多的操作，例如初始化多个组件状态、绑定多个事件监听器等。因为过多的操作可能会导致组件的加载时间过长，影响用户体验。

建议:

将一些初始化操作放在 created 生命周期钩子函数中。
将一些事件监听器放在 mounted 钩子函数中，并在 beforeDestroy 钩子函数中移除。

第四部分：`mounted` 的进阶应用 - 扩展功能，提升效率

第十一章：`mounted` 与第三方库的结合 - 扩展功能

在 mounted 钩子函数中，我们可以使用第三方库来扩展组件的功能，例如使用 Chart.js 绘制图表、使用 Swiper.js 实现轮播图等。

<template>
  <div ref="myChart"></div>
</template>

<script>
import Chart from 'chart.js';

export default {
  mounted() {
    const myChart = this.$refs.myChart;
    new Chart(myChart, {
      // 图表配置
    });
  }
};
</script>

代码解析:

ref="myChart": 使用 ref 属性为 div 元素添加一个引用。
this.$refs.myChart: 通过 $refs 属性获取到 div 元素的引用。
new Chart(myChart, { ... });: 使用 Chart.js 库在 div 元素中绘制图表。

第十二章：`mounted` 与自定义指令的结合 - 增强灵活性

在 mounted 钩子函数中，我们可以使用自定义指令来增强组件的功能，例如实现自动聚焦、延迟加载等。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

<template>
  <div>
    <input type="text" v-focus>
  </div>
</template>

<script>
export default {
  mounted() {
    // ...
  }
};
</script>

代码解析:

Vue.directive('focus', { ... }): 定义一个名为 focus 的自定义指令。
inserted: function (el) { ... }: 指令插入到 DOM 中时执行的回调函数。
el.focus(): 将焦点设置到 input 元素上。

第十三章：`mounted` 与 Vuex 的结合 - 状态管理

在 mounted 钩子函数中，我们可以使用 Vuex 状态管理模式来获取和更新组件的数据模型。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['message'])
  },
  mounted() {
    // ...
  }
};
</script>