Wechat applet_ 15. Pure data field

What is a pure data field :

Concept : Pure data fields are those that are not used for interface rendering data Field

Application scenarios :; For example, in some cases , some data The fields in will not be displayed on the interface , It will not be passed to other components , Use only inside the current component , With this characteristic data The field is suitable to be set as a pure data field

benefits : Pure data fields help improve the performance of page updates

Usage rule :

stay Component Constructor's options In nodes , Appoint pureDataPatten For a regular expression , Fields whose field names match this regular expression will become pure data fields , The sample code is as follows :

// components/numsAdd/numsAdd.js
Component({
    
  options: {
    
    //  Specify all with _ The data field at the beginning is pure data field 
    pureDataPattern: /^_/
  },
  /** *  The initial data of the component  */
  data: {
    
    a:true,
    _b:true,
  }
}

Using pure data fields to transform data listeners :

Component({
    
  options: {
    
    //  Specify all with _ The data field at the beginning is pure data field 
    pureDataPattern: /^_/
  },
   data: {
    
    _rgb: {
    
      r: 0,
      g: 0,
      b: 0,
    },
        fullColor: '0,0,0' // according to rgb Three properties of an object , Dynamic computing fullColor Value 
   },
})

Case complete code :
WXML:

<nums></nums>

Component's WXML:

<view class="randomColor" style="background-color: rgb({
        {
        fullColor}});"></view>
<text>
  {
   {rgb.r}},{
   {rgb.g}},{
   {rgb.b}}
   At present RGB value :{
   {fullColor}}
</text>
<button size="mini" type="primary" bindtap="rAdd">R+1</button>
<button size="mini" type="primary" bindtap="gAdd">G+1</button>
<button size="mini" type="primary" bindtap="bAdd">B+1</button>

Component's css:

.randomColor {
    
  display: flex;
  justify-content: center;
  width: 100%;
  height: 200rpx;
}

Component's .js:

// components/numsAdd/numsAdd.js
Component({
    
  /** *  A list of properties of a component  */
  properties: {
    

  },
  options: {
    
    //  Specify all with _ The data field at the beginning is pure data field 
    pureDataPattern: /^_/
  },
  /** *  The initial data of the component  */
  data: {
    
    _rgb: {
    
      r: 0,
      g: 0,
      b: 0,
    },
    fullColor: '0,0,0' // according to rgb Three properties of an object , Dynamic computing fullColor Value 
  },

  /** *  A list of methods for a component  */
  methods: {
    
    rAdd() {
    
      this.setData({
    
        '_rgb.r': this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5
      })
    },
    gAdd() {
    
      this.setData({
    
        '_rgb.g': this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5
      })
    },
    bAdd() {
    
      this.setData({
    
        '_rgb.b': this.data._rgb.b + 5 > 255 ? 255 : this.data._rgb.b + 5
      })
    },
  },
  //  Data listening node 
  observers: {
    
    '_rgb.**': function (obj) {
    
      this.setData({
    
        fullColor: `${
      obj.r},${
      obj.g},${
      obj.b}`
      })
    }

    // ' object . attribute A, object . attribute B':function( attribute A The new value of , attribute B The new value of ){}
    //  Object triggers this listener in three ways ：
    // [ For attributes A assignment ] Use setData Set up this.data. object . attribute A  Trigger when 
    // [ For attributes B assignment ] Use setData Set up this.data. object . attribute B  Trigger when 
    // [ Directly assign values to objects ] Use setData Set up this.data. object   Trigger when 
  },
})

function , This part of the code is circled :