前语

首要咱们要了解什么是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。