微信小程序_15,纯数据字段

什么是纯数据字段:

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

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

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

使用规则:

在Component构造器的options节点中,指定pureDataPatten为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段,示例代码如下:

// components/numsAdd/numsAdd.js
Component({
  options: {
    // 指定所有以_开头的数据字段为纯数据字段
    pureDataPattern: /^_/
  },
  /**
   * 组件的初始数据
   */
  data: {
    a:true,
    _b:true,
  }
}

使用纯数据字段改造数据监听器案例:

Component({
  options: {
    // 指定所有以_开头的数据字段为纯数据字段
    pureDataPattern: /^_/
  },
   data: {
    _rgb: {
      r: 0,
      g: 0,
      b: 0,
    },
        fullColor: '0,0,0' //根据rgb对象的三个属性,动态计算fullColor的值
   },
})

案例完整代码:
WXML:

<nums></nums>

组件的WXML:

<view class="randomColor" style="background-color: rgb({{fullColor}});"></view>
<text>
  {{rgb.r}},{{rgb.g}},{{rgb.b}}
  当前RGB值:{{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>

组件的css:

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

组件的.js:

// components/numsAdd/numsAdd.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  options: {
    // 指定所有以_开头的数据字段为纯数据字段
    pureDataPattern: /^_/
  },
  /**
   * 组件的初始数据
   */
  data: {
    _rgb: {
      r: 0,
      g: 0,
      b: 0,
    },
    fullColor: '0,0,0' //根据rgb对象的三个属性,动态计算fullColor的值
  },

  /**
   * 组件的方法列表
   */
  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
      })
    },
  },
  // 数据监听节点
  observers: {
    '_rgb.**': function (obj) {
      this.setData({
        fullColor: `${obj.r},${obj.g},${obj.b}`
      })
    }

    // '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){}
    // 对象触发此监听器的三种情况：
    // [为属性A赋值]使用setData设置this.data.对象.属性A 时触发
    // [为属性B赋值]使用setData设置this.data.对象.属性B 时触发
    // [直接为对象赋值]使用setData设置this.data.对象 时触发
  },
})

运行,圈起来的才是这部分的代码: