当前位置：首页 > news >正文

在Vue中，onLoad，onShow ，mounted的区别

news 2025/9/10 15:14:19

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>