UniApp生命周期

最新推荐文章于 2025-09-16 08:35:03 发布

原创最新推荐文章于 2025-09-16 08:35:03 发布 · 454 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uniapp 专栏收录该内容

61 篇文章

订阅专栏

UniApp基于Vue.js框架，其生命周期分为应用级（App）、页面级（Page） 和组件级（Component） 三类。以下是核心生命周期钩子及其常见使用场景，附带代码示例。所有代码均使用Vue单文件组件格式（.vue文件）。

一、主要生命周期钩子

应用级（App.vue）：
- onLaunch：应用初始化时触发（仅触发一次）
- onShow：应用切换到前台时触发
- onHide：应用切换到后台时触发
页面级（Page）：
- onLoad：页面加载时触发（参数传递）
- onShow：页面显示时触发
- onReady：页面初次渲染完成时触发
- onHide：页面隐藏时触发
- onUnload：页面卸载时触发
组件级（Component）：
- created：组件实例创建后触发
- mounted：组件挂载到DOM后触发
- beforeDestroy：组件销毁前触发

二、不同场景下的代码示例

以下示例基于UniApp页面（Page）生命周期，展示常见使用场景。

场景1：页面初始化时加载数据（使用`onLoad`）

场景说明：进入页面时获取URL参数，并请求初始数据（如商品详情页）。

<script>
export default {
  data() {
    return {
      productId: null,
      productInfo: {}
    }
  },
  onLoad(options) {
    // 从URL参数获取商品ID
    this.productId = options.id;
    this.fetchProductData();
  },
  methods: {
    async fetchProductData() {
      // 模拟API请求
      const res = await uni.request({
        url: `https://api.example.com/products/${this.productId}`
      });
      this.productInfo = res.data;
    }
  }
}
</script>

场景2：页面显示时刷新数据（使用`onShow`）

场景说明：每次页面显示时检查数据更新（如用户从后台返回时刷新订单列表）。

<script>
export default {
  data() {
    return {
      orders: []
    }
  },
  onShow() {
    // 页面显示时重新加载数据
    this.loadOrders();
  },
  methods: {
    async loadOrders() {
      const res = await uni.request({
        url: 'https://api.example.com/orders'
      });
      this.orders = res.data;
    }
  }
}
</script>

场景3：页面渲染完成后操作DOM（使用`onReady`）

场景说明：页面渲染完成后执行DOM操作（如初始化地图组件）。

<script>
export default {
  onReady() {
    // 页面渲染完成后初始化地图
    this.initMap();
  },
  methods: {
    initMap() {
      const mapContext = uni.createMapContext('myMap', this);
      mapContext.moveToLocation({
        latitude: 39.9042,
        longitude: 116.4074
      });
    }
  }
}
</script>
<template>
  <map id="myMap" style="width:100%; height:300px"></map>
</template>

场景4：页面卸载时清理资源（使用`onUnload`）

场景说明：离开页面时取消定时器或事件监听（如聊天页面清理轮询）。

<script>
export default {
  data() {
    return {
      timer: null
    }
  },
  onLoad() {
    // 启动定时器轮询消息
    this.timer = setInterval(() => {
      this.checkNewMessages();
    }, 5000);
  },
  onUnload() {
    // 页面卸载时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  methods: {
    checkNewMessages() {
      // 检查新消息逻辑
    }
  }
}
</script>

场景5：组件级数据初始化（使用`created`）

场景说明：组件创建时初始化数据（如自定义弹窗组件）。

<script>
export default {
  created() {
    // 组件创建时设置默认状态
    this.isVisible = false;
  },
  methods: {
    show() {
      this.isVisible = true;
    }
  }
}
</script>
<template>
  <view v-if="isVisible" class="modal">弹窗内容</view>
</template>