【mounted钩子函数中获取】在 Vue.js 开发过程中，`mounted` 是组件生命周期中的一个重要阶段。它在组件被挂载到 DOM 后执行，常用于初始化数据、发起请求或操作 DOM 元素等。很多开发者在使用 `mounted` 钩子时，会遇到如何正确“获取”某些信息的问题，比如组件的属性、状态、DOM 元素或异步数据等。
以下是对 `mounted` 钩子函数中常见“获取”操作的总结与对比。
一、常见“获取”操作总结
| 获取内容 | 是否可用（在 mounted 中） | 说明 |
| 组件实例 | ✅ | 可通过 `this` 访问组件实例，包括 data、methods、props 等 |
| props | ✅ | 可直接访问传入的 props 值 |
| data 数据 | ✅ | 可直接访问 data 中定义的数据 |
| methods 方法 | ✅ | 可调用组件中定义的方法 |
| DOM 元素 | ✅ | 可通过 `this.$el` 或 `ref` 引用的元素进行操作 |
| 异步数据 | ✅ | 可在 `mounted` 中发起异步请求（如 axios 请求），但需注意异步加载问题 |
| $route / $router | ✅ | 在 Vue Router 中可访问当前路由信息 |
| Vuex 状态 | ✅ | 可通过 `this.$store.state` 或 mapState 获取 vuex 中的状态 |
二、注意事项
1. 不要在 mounted 中修改 props
虽然可以读取 props，但不建议直接修改，因为 props 应该是只读的。如果需要改变，应通过事件通知父组件。
2. 避免过度依赖 mounted
某些情况下，使用 `created` 钩子可能更合适，尤其是在不需要 DOM 的时候。
3. 异步请求的处理
在 `mounted` 中发起异步请求时，需要注意页面加载顺序和数据渲染时机，防止出现空白或错误显示。
4. DOM 操作需谨慎
虽然可以在 `mounted` 中操作 DOM，但应尽量使用 Vue 提供的指令和方法，以保持代码的可维护性。
三、示例代码片段
```javascript
export default {
data() {
return {
message: '',
items: [
}
},
mounted() {
// 获取 props
console.log(this.$props);
// 获取 data 数据
console.log(this.message);
// 获取 DOM 元素
const el = this.$el;
console.log(el);
// 发起异步请求
fetch('/api/data')
.then(res => res.json())
.then(data => {
this.items = data;
});
// 使用 ref 获取元素
this.$refs.myRef.innerHTML = 'Hello';
}
}
```
四、总结
`mounted` 钩子函数是 Vue 生命周期中非常关键的一环，适合用于初始化操作和数据获取。开发者应根据实际需求合理使用，并注意避免常见的误区。通过理解 `mounted` 中可获取的内容和限制，可以提升开发效率和代码质量。
