vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue生命周期在uniapp中的用法

一文详解vue生命周期在uniapp中的用法

作者:沐渃清澄

在uniapp中,vue的生命周期的用法基本都得以保留,但是对于特殊的需求以及特殊的情况,uniapp还引入了一些特有的生命周期钩子,本文给大家详细介绍了vue生命周期在uniapp中的用法,感兴趣的朋友可以参考下

前言

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

uniapp中的vue生命周期

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

1、基本的生命周期

uni-app 中,我们可以正常使用 vue 生命周期的常见钩子,例如 createdmountedupdateddestroyed

<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 引入了一些特有的生命周期钩子,可以用于处理特定平台的需求。以下是一些示例:

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

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

onLaunchonHideonError:处理 APP 端的启动、进入后台和错误等情况。

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

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

3、页面生命周期

uniapp 的页面生命周期在不同平台中也有所不同,如小程序端的 onLoadonReady

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

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

结语

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

以上就是一文详解vue生命周期在uniapp中的用法的详细内容,更多关于vue生命周期在uniapp中的用法的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文