自定义组件--纯数据字段&组件的生命周期

发布于:2022-07-26 ⋅ 阅读:(654) ⋅ 点赞:(0)

1.1 概念:纯数据字段指的是那些不用于界面渲染的data字段

应用场景:在有些情况下,某些data中的字段既不会展示在界面上也不会传递给其他组件,仅仅在当前组件内部使用,带有这种特性的data字段适合被设置为纯数据字段

 好处:纯数据字段有助于提升页面更新的性能(不懂怎样提升页面的更新性能)

1.2 使用规则

在构造器的options节点中,指定pureDataPattern为一个正则表达式,字段名符合这个正则表达的字段成为纯数据字段

Component({
    options:{
//指定所有_开头的数据字段为纯数据字段
        pureDataPattern:/^_/
    },
    data:{
    a:true//普通数据字段
    _b:true//纯数据字段
    }
})

 2.1组件全部可用的生命周期函数

生命周期函数 参数 描述说明
created 在组件实例刚刚被创建时执行
attached 在组件实例进入页面节点树时执行(还未渲染)
ready 在组件在视图层布局完成后执行
moved 在组件实例被移动到节点树另一个位置时执行
detached 在组件实例被从页面节点树移除时执行
error Object Error 每当组件方法抛出错误时执行

 2.2lifetimes节点

在小程序组件中,生命周期函数可以直接定义在Component构造器的第一级参数中,可以在lifetimes字段声明(推荐,其优先级最高)

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

有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期

生命周期函数 参数 描述
show 组件所在的页面被展示时执行
hide 组件所在的页面被隐藏时执行
resize Object Size 组件所在的页面尺寸变化时执行

2.4pageLifetimes节点

组件所在页面的生命周期,需要定义在pageLifetimes节点中

Component({
    pageLifetimes:{
        show:(){}
        hide:(){}
        resize:(){}
    }
})

2.5案例

展示页面时,随机生成RGB颜色值

 

//组件js 
methods:{
     _randomColor(){
            this.setData({
                _rgb:{
                    r:Math.floor(Math.random()*256),//Math.floor()向下取整,即像马太效应里的小的让它更小
                    g:Math.floor(Math.random()*256),
                    b:Math.floor(Math.random()*256)
                }
            })
        }
}

  pageLifetimes:{
        show:function(){
            this._randomColor()
        }
    }

Math.floor()函数可参考:http://t.csdn.cn/kole7