在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

---

4. 三者的区别总结

特性	onLoad	onShow	mounted
触发时机	页面首次加载时触发	页面显示时触发（包括首次和返回）	组件挂载到 DOM 后触发
适用对象	UniApp 页面	UniApp 页面	Vue 组件
参数接收	通过 options 接收页面参数	无法直接接收参数	无法直接接收参数
使用场景	初始化数据、获取页面参数	刷新数据、更新状态	操作 DOM、初始化第三方库

---

5. 综合示例

假设我们有一个页面，需要实现以下功能：

1. 页面加载时获取参数并初始化数据。

2. 页面显示时刷新数据。

3. 组件挂载后操作 DOM。

代码实现

vue

---

6. 运行逻辑

1. 页面加载时：

   • 触发 onLoad，获取参数并初始化数据。

   • 触发 mounted，组件挂载完成，操作 DOM。

2. 页面显示时：

   • 触发 onShow，刷新数据。

3. 从其他页面返回时：

   • 再次触发 onShow，刷新数据。

---

7. 总结

• onLoad：页面加载时执行一次性操作。

• onShow：页面显示时执行刷新操作。

• mounted：组件挂载后操作 DOM 或执行依赖 DOM 的逻辑。