小程序中自定义组件的纯数据字段

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」

什么是纯数据字段

• 概念

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

• 应用场景

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

• 优点

  纯数据字段有助于提升页面渲染的性能

纯数据字段的使用规则

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

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

纯数据字段的使用

使用纯数据字段改造上一篇 # 小程序中自定义组件的数据监听器 demo中的相关逻辑

• 修改之前的代码

  Component({
      data: {
          rgb: {
              r:0,
              g:0,
              b:0
          },
          fullColor: "0,0,0"
      },
  
      methods: {
          changeR(){
              this.setData({
                  "rgb.r": this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
              })
          },
         
         changeG(){
              this.setData(g
                  "rgb.g": this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
              })
          },
  
          changeB(){
              this.setData({
                  "rgb.b": this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
              })
          },
      },
      
      observers: { 
          "rgb.r, rgb.g, rgb.b" : function (r, g, b) {
              this.setData({ 
                  fullColor: `${r}, ${g}, ${b}` 
              }) 
          }
      }
  })
  

  以上逻辑中定义了俩个数据，分别为 rgb 和 fullColor，其中 fullColor 在页面渲染的时候会用到，所以 fullColor 不能被定义为纯数据字段，rgb 对象在页面渲染时没有被用到，只在业务逻辑被用到了，所以 rgb 适合被修改为纯数据字段，从而提高页面的渲染性

• 修改之后的代码

  Component({
  
      options: {
          //指定所有 _ 开头的数据字段为纯数据字段
          pureDataPattern: /^_/
      },
      
      data: {
          // 将 rgb 改造为以 _ 开头的纯数据字段
          _rgb: {
              r:0,
              g:0,
              b:0
          },
          fullColor: "0,0,0"
      },
  
      methods: {
          changeR(){
              this.setData({
                  "_rgb.r": this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5
              })
          },
         
         changeG(){
              this.setData(g
                  "_rgb.g": this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5
              })
          },
  
          changeB(){
              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}`
              })
          }
      }
  })