-
定义
- 在 Vue.js 中，
mounted是一个生命周期钩子函数。它会在组件挂载完成后被调用。挂载是指将组件的模板（template）渲染成真实的 DOM 节点，并插入到文档（document）中。这意味着当mounted钩子被触发时，组件已经完成了它的初始渲染，并且 DOM 元素已经添加到页面中，可以安全地访问和操作 DOM 节点了。
- 在 Vue.js 中，
-
使用场景
-
DOM 操作：如果需要直接操作 DOM 元素，比如获取某个元素的高度、宽度，或者给某个 DOM 元素添加事件监听器等，
mounted是一个合适的地方。例如：
-
export default {
mounted() {
// 获取组件中的一个DOM元素，假设组件模板中有一个id为'myDiv'的div元素
const myDiv = document.getElementById('myDiv');
// 给这个div元素添加一个点击事件监听器
myDiv.addEventListener('click', () => {
console.log('Div被点击了');
});
}
}
-
第三方库的初始化：很多第三方库（如图表库、地图库等）需要在 DOM 元素存在之后才能进行初始化。在
mounted钩子中可以初始化这些库并将其绑定到组件的 DOM 元素上。例如，使用echarts绘制图表：
import echarts from 'echarts';
export default {
mounted() {
const myChart = echarts.init(document.getElementById('chartContainer'));
// 配置图表数据和选项
const option = {
// 这里是echarts的配置选项，如标题、坐标轴、系列等
title: {
text: '示例图表'
},
series: [
{
type: 'bar',
data: [10, 20, 30]
}
]
};
myChart.setOption(option);
}
}
-
发送初始数据请求：如果组件需要在加载后立即从服务器获取数据来填充页面内容，也可以在
mounted钩子中发送网络请求。例如，使用axios发送一个获取用户信息的请求：
import axios from 'axios';
export default {
data() {
return {
userInfo: null
};
},
mounted() {
axios.get('/api/userInfo').then((response) => {
this.userInfo = response.data;
}).catch((error) => {
console.error('获取用户信息出错:', error);
});
}
}
-
注意事项
- 避免滥用 DOM 操作：虽然在
mounted中可以进行 DOM 操作，但 Vue.js 更推荐使用数据驱动的方式来更新 DOM。过度的 DOM 操作可能会导致代码难以维护，并且可能会破坏 Vue.js 的响应式原理。例如，如果通过 DOM 操作改变了一个元素的文本内容，而这个元素原本是通过{{message}}这样的数据绑定来显示内容的，那么可能会导致数据和 DOM 之间的不一致。 - 异步操作的顺序：如果在
mounted中有多个异步操作（如多个网络请求或者定时器等），要注意它们的执行顺序和可能产生的竞争条件。例如，如果一个请求依赖于另一个请求返回的数据，需要合理地使用Promise链或者async/await来确保数据的正确获取和使用。
- 避免滥用 DOM 操作：虽然在
