微信小程序 组件生命周期

  • created:组件实例刚被创建好,此时还不能调用setData -- 刚被创建出来
  • attached:组件完全初始化完毕,进入页面节点树
    • 这个生命周期很有用,绝大多数初始化的工作可以在这时进行(如:发起网络请求)
    • 放到UI结构中,还没有被渲染完成
  • ready:  组件视图层布局完成后执行。-- 渲染完成
  • moved:  组件实例被移动到另一个节点树时执行
  • detached:离开页面节点树。可以清理一些定时器等工作  --  被销毁的时候
  • error:  每当组件方法抛错时执行

( ps:标红的为重要的生命周期函数 ) 

组件的生命周期:新旧写法同时存在的时候,以新写法为准,旧写法不会生效

两种写法:

  1. 与data节点平齐(旧写法)
  2. 在lifetimes字段中声明 (新写法)


    /**
     * 组件的生命周期: 新旧写法同时存在的时候,以新写法为准,旧写法不会生效
     */
    // 新写法(同时存在以新方式为准,旧的不生效)
    lifetimes: {
        created(){},
        attached(){}
    },
    // 旧写法 -- 与data平齐,不包裹在lifetimes中(同时存在以新方式为准,旧的不生效)
        created(){},
        attached(){}
    /**
     * 组件所在页面的生命周期:
     *      show:组件所在的页面被展示。(如:切换页面,切换tabbar等)
     *      hide:组件所在的页面被隐藏。(如:切换页面,切换tabbar等)
     *      resize:组件所在的页面尺寸变化时
     */
    pageLifetimes: {
        show: function () {},
        hide: function () {},
        resize: function () {},
    },

组件所在页面的生命周期:

  • show:组件所在的页面被展示。(如:切换页面,切换tabbar等)
  • hide:组件所在的页面被隐藏。(如:切换页面,切换tabbar等)
  • resize:组件所在的页面尺寸变化时

你可能感兴趣的:(javascript,微信小程序,微信小程序组件)