zoukankan      html  css  js  c++  java
  • uniapp的生命周期及其和vue生命周期的对比

    uni-app应用生命周期

    uni-app部分页面生命周期

    vue生命周期(注:这也是Uniapp组件的生命周期)

    uni-app页面生命周期与vue生命周期的对比

    页面加载过程

    加载 -> 显示 -> 加载完成 -> 页面隐藏 -> 页面卸载

    uni-app页面加载过程

    onLoad:监听页面加载 -> onShow:监听页面显示 -> onReady:监听页面初次渲染完成 -> onHide:监听页面隐藏 -> onUnload:监听页面卸载

    vue页面加载过程

    created:实例被创建后执行 -> beforeMount: 实例被挂载之前执行 -> mounted:实例挂载完成后执行 -> updated:页面更新后执行 -> beforeDestroy:页面销毁前执行

    根据以上对比:建议:

    1、uni-app的页面生命周期仅在page页面有效,而单独封装的组件中【页面周期无效】,但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的,即你仍然可以在uni-app项目中使用Vue生命周期,但是不建议这么做】
    2、推荐使用uni-app里面的onLoad 代替 vue 里面的 created
    3、推荐使用uni-app里面的onReady 代替 vue 里面的 mounted
    4、uniapp的子组件里是没有onLoad,onReady等页面生命周期,要使用created,mounted等Vue生命周期
    

    uni-app生命周期

    https://uniapp.dcloud.io/frame?id=生命周期

    vue生命周期

    https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

  • 相关阅读:
    MySQL
    MySQL
    MySQL
    javaScript之深度理解原型链
    javaScript之this的五种情况
    ES6之箭头函数中的this
    javaScript之跨浏览器的事件对象
    javaScript之事件处理程序
    javaScript之promise
    VUE之使用百度地图API
  • 原文地址:https://www.cnblogs.com/huihuihero/p/12665304.html
Copyright © 2011-2022 走看看