properties属性
在小程序组件中,properties 是组件的对外属性,用来接收外界传递到组件中的数据
properties定义

properties: {
    // 第一种方式:简化的定义方式(没办法指定默认值)
    // max: Number
    //第二种方式:完整的定义方式(可指定默认值)
    max: {
      type: Number,
      value: 10
    }
  },

data和properties的区别
在小程序的组件中,properties 属性和data数据的用法相同,它们都是可读可写的,只不过:
●data更倾向于存储组件的私有数据
●properties更倾向于存储外界传递到组件中的数据

使用setData修改properties的值
由于data数据和properties属性在本质上没有任何区别,因此properties属性的值也可以用于页面渲染,
或使用setData为properties中的属性重新赋值

数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于vue中的

watch侦听器。在小程序组件中,数据监听器的基本语法格式

微信小程序获取properties数据 小程序 properties_前端

监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化

微信小程序获取properties数据 小程序 properties_小程序_02


监听对象中所有属性的变化

如果某个对象中需要被监听的属性太多,为了方便,可以使用通配符**来监听对象中所有属性的变化

微信小程序获取properties数据 小程序 properties_小程序_03

什么是纯数据字段?

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

应用场景:例如有些情况下,某些data中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当

组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。

好处:纯数据字段有助于提升页面更新的性能。

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

微信小程序获取properties数据 小程序 properties_前端_04

组件主要的生命周期函数

在小程序组件中,最重要的生命周期函数有3个,分别是created、attached、 detached。 它们各自的特点如下:

①组件实例刚被 创建好的时候,created 生命周期函数会被触发

●此时还不能调用setData

●通常在这个生命周期函数中,只应该用于给组件的this添加一些自定义的属性字段

②在组件 完全初始化完毕、进入页面节点树后,attached 生命周期函数会被触发

●此时,this.data 已被初始化完毕

●这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)

③在组件离开页面节点树后,detached 生命周期函数会被触发

●退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数

●此时适合做一-些清理性质的工作

lifetimes节点
在小程序组件中,生命周期函数可以直接定义在Component构造器的第一-级参数中, 可以在lifetimes字段内进行声明(这是推荐的方式,其优先级最高)。

什么是组件所在页面的生命周期?

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

例如:每当触发页面的show生命周期函数的时候,我们希望能够重新生成一一个随机的RGB颜色值。

微信小程序获取properties数据 小程序 properties_微信小程序_05


pageLifetimes节点

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