探索vue生命周期在uniapp中的用法

前言

首先我们要了解什么是uniapp，uni-app是一种基于 Vue.js 的跨平台应用框架，可以帮助开发者使用一套代码同时构建小程序、H5、APP等多个平台的应用。 以下是 uni-app 的一些关键特性和概念：

1. 跨平台开发： uni-app 支持同时开发微信小程序、支付宝小程序、百度小程序、H5、APP 等多个平台，通过一套代码实现多端运行。
2. 基于 Vue.js： uni-app 基于 Vue.js 框架，开发者可以使用熟悉的 Vue.js 语法进行开发，同时享受 Vue.js 生态系统的丰富资源。
3. 统一组件和 API： uni-app 提供了一套统一的组件和 API，开发者可以在不同平台上使用相同的组件和接口，减少了因平台差异而引起的代码调整。
4. 自定义组件和插件： 开发者可以通过创建自定义组件和插件来扩展 uni-app 的功能，实现更多定制化的需求。
5. 支持原生能力： uni-app 提供了一些内置的原生能力，例如拍照、录音、获取地理位置等，同时也支持调用原生小程序和原生 APP 的接口。
6. 运行时性能优化： uni-app 通过将模板编译为原生渲染的方式，优化了运行时性能，提高了应用的响应速度。
7. 开发工具支持： uni-app 提供了开发工具，包括 HBuilderX等，用于辅助开发和调试。
8. 生态系统： uni-app 生态系统丰富，有大量社区贡献的插件、模板和组件，方便开发者快速搭建和部署应用。

uniapp中的vue生命周期

在niapp中，vue的生命周期的用法基本都得以保留，但是对于特殊的需求以及特殊的情况，uniapp还引入了一些特有的生命周期钩子。如下面的例子：

1、基本的生命周期

在 uni-app 中，我们可以正常使用 vue 生命周期的常见钩子，例如 created、mounted、updated、destroyed。

<template>
  <view>
    <p>{{ message }}</p>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  },
  created() {
    console.log('vue created ');
  },
  mounted() {
    console.log('vue mounted ');
  },
  updated() {
    console.log('vue updated ');
  },
  destroyed() {
    console.log('vue destroyed ');
  }
}
// 输出结果为：
// vue created
// vue mounted
// vue updated
// vue destroyed
</script>

在 uniapp中，created 生命周期在组件实例创建后被调用，mounted 生命周期在组件挂载到 DOM 后被调用。updated 生命周期会在数据更新导致重新渲染时调用。destroyed 生命周期在组件销毁时被调用。

2、特有的生命周期钩子

在uniapp 引入了一些特有的生命周期钩子，可以用于处理特定平台的需求。以下是一些示例：

• onNavigationBarButtonTap：处理小程序端导航栏按钮点击事件。如：

<script>
export default {
  methods: {
    onNavigationBarButtonTap() {
      console.log('Button');
    }
  }
}
</script>

onNavigationBarButtonTap 生命周期钩子用于处理小程序端导航栏按钮点击事件。当用户点击导航栏按钮时，此函数会被触发。

onLaunch、onHide、onError：处理 APP 端的启动、进入后台和错误等情况。

<script>
export default {
  onLaunch(options) {
    console.log('Launched', options);
  },
  onHide() {
    console.log('Hidden');
  },
  onError(err) {
    console.error('Error', err);
  }
}
</script>

在上述三个生命周期钩子中，onLaunch、onError是会携带一个参数的，其中options，包含了 APP 启动时的参数信息，err，包含了错误信息。

3、页面生命周期

uniapp 的页面生命周期在不同平台中也有所不同，如小程序端的 onLoad、onReady 等

<script>
export default {
  onLoad(options) {
    console.log('Loaded', options);
  },
  onReady() {
    console.log('Ready');
  }
}
</script>

在 uniapp 中，onLoad 生命周期在页面加载时被调用，onReady 生命周期在页面渲染完成后被调用。onLoad 会接收页面参数 options，包含了页面的启动参数。

结语

总的来说，vue生命周期在uniapp中有了如下的变化：

1. 生命周期的执行顺序： 在 uniapp 中，生命周期的执行顺序与 Vue.js 的标准执行顺序基本相同，但部分生命周期在小程序和APP端的执行时机有所不同。

   • 小程序端：onLoad -> onShow -> onReady -> onHide -> onUnload
   • APP端：onLaunch -> onShow -> onHide -> onError

2. 特有生命周期钩子： uni-app 引入了一些特有的生命周期钩子，例如 onNavigationBarButtonTap、onBackPress、onPageScroll 等，用于处理在不同端（小程序、APP等）的特定事件。

3. onReady 在小程序端： onReady 生命周期在小程序端表示页面渲染完成，而在 Vue.js 中 mounted 生命周期表示 DOM 渲染完成。在 uni-app 中，你可能需要在 onReady 钩子中进行一些 DOM 操作。

4. APP端生命周期： 在 uni-app 的 APP 端，引入了额外的生命周期钩子，如 onLaunch、onHide、onError。这些生命周期用于处理 APP 启动、进入后台和错误等情况。

5. beforeDestroy 在APP端： 在 uni-app 的 APP 端，beforeDestroy 生命周期用于监听 APP 生命周期的销毁情况，这在 Vue.js 中是没有的。

6. Vue.js 生命周期相同： 除了上述变化，uni-app 中依然保留了 Vue.js 标准的生命周期钩子，如 created、mounted、updated、destroyed。