在Vue中,onLoad,onShow-,mounted的区别
目录
在Vue中，onLoad，onShow ，mounted的区别
1. onLoad
触发时机 ：页面 首次加载 时触发，且只会触发一次。
适用场景 ：适合在页面加载时执行一次性操作，比如获取页面参数、初始化数据、发送请求等。
特点 ：
- 可以接收页面传递的参数（通过
options对象）。 - 是 UniApp 页面生命周期钩子，不是 Vue 组件的钩子。
- 可以接收页面传递的参数（通过
示例代码
javascript
export default {
onLoad(options) {
console.log('页面加载，参数为:', options);
// 初始化数据
this.loadData();
},
methods: {
loadData() {
console.log('加载数据...');
}
}
}2. onShow
触发时机 ：页面 显示 时触发，包括页面首次加载和从其他页面返回时。
适用场景 ：适合在页面每次显示时执行操作，比如刷新数据、更新状态等。
特点 ：
- 无法直接接收参数，但可以通过全局变量或缓存传递数据。
- 是 UniApp 页面生命周期钩子，不是 Vue 组件的钩子。
示例代码
javascript
export default {
onShow() {
console.log('页面显示');
// 刷新数据
this.refreshData();
},
methods: {
refreshData() {
console.log('刷新数据...');
}
}
}3. mounted
触发时机 ：Vue 组件 挂载到 DOM 中 后触发。
适用场景 ：适合在组件挂载完成后操作 DOM 或执行依赖 DOM 的逻辑，比如初始化第三方库、获取 DOM 元素等。
特点 ：
- 是 Vue 组件的生命周期钩子，不是 UniApp 页面的钩子。
- 在 UniApp 中，
mounted()通常用于组件，而不是页面。
示例代码
vue
<template>
<view>
<text ref="myText">Hello UniApp</text>
</view>
</template>
<script>
export default {
mounted() {
console.log('组件已挂载');
// 操作 DOM
const textElement = this.$refs.myText;
console.log('文本内容:', textElement.textContent);
}
}
</script>4. 三者的区别总结
| 特性 | onLoad | onShow | mounted |
|---|---|---|---|
| 触发时机 | 页面首次加载时触发 | 页面显示时触发（包括首次和返回） | 组件挂载到 DOM 后触发 |
| 适用对象 | UniApp 页面 | UniApp 页面 | Vue 组件 |
| 参数接收 | 通过 options 接收页面参数 | 无法直接接收参数 | 无法直接接收参数 |
| 使用场景 | 初始化数据、获取页面参数 | 刷新数据、更新状态 | 操作 DOM、初始化第三方库 |
5. 综合示例
假设我们有一个页面，需要实现以下功能：
- 页面加载时获取参数并初始化数据。
- 页面显示时刷新数据。
- 组件挂载后操作 DOM。
代码实现
vue
<template>
<view>
<text ref="myText">{{ message }}</text>
<button @click="navigateToOtherPage">跳转到其他页面</button>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello UniApp'
};
},
onLoad(options) {
console.log('页面加载，参数为:', options);
this.loadData();
},
onShow() {
console.log('页面显示');
this.refreshData();
},
mounted() {
console.log('组件已挂载');
const textElement = this.$refs.myText;
console.log('文本内容:', textElement.textContent);
},
methods: {
loadData() {
console.log('加载数据...');
// 模拟初始化数据
this.message = '数据已加载';
},
refreshData() {
console.log('刷新数据...');
// 模拟刷新数据
this.message = '数据已刷新';
},
navigateToOtherPage() {
uni.navigateTo({
url: '/pages/otherPage/otherPage'
});
}
}
};
</script>6. 运行逻辑
页面加载时 ：
- 触发
onLoad，获取参数并初始化数据。 - 触发
mounted，组件挂载完成，操作 DOM。
- 触发
页面显示时 ：
- 触发
onShow，刷新数据。
- 触发
从其他页面返回时 ：
- 再次触发
onShow，刷新数据。
- 再次触发
7. 总结
onLoad：页面加载时执行一次性操作。onShow：页面显示时执行刷新操作。mounted：组件挂载后操作 DOM 或执行依赖 DOM 的逻辑。