微信小程序开发纯数据字段

文章目录

组件中的纯数据字段
组件属性中的纯数据字段
使用数据监听器监听纯数据字段

微信小程序可以使用纯数据字段来提升页面更新性能，本文将围绕纯数据字段展开讨论。

组件中的纯数据字段

在组件中，某些不需要展示在界面上的数据字段可以指定为纯数据字段，它们只被记录在this.data中并不参与任何界面渲染过程。通过在Component构造器的options定义段中指定pureDataPattern为正则表达式，合法命名的字段将成为纯数据字段。

示例代码：

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  data: {
    a: true, // 普通数据字段
    _b: true, // 纯数据字段
  },
  methods: {
    myMethod() {
      this.data._b // 纯数据字段可以在 this.data 中获取
      this.setData({
        c: true, // 普通数据字段
        _d: true, // 纯数据字段
      })
    }
  }
})

上述组件中的纯数据字段不会出现在WXML中进行展示。

组件属性中的纯数据字段

除了在组件中定义外，属性也可以使用纯数据字段，但不能直接用于组件自身的 WXML 中，属性监听器永远不会触发。从小程序基础库版本2.10.1开始，还可以在页面或自定义组件的json文件中配置pureDataPattern，此时其值应当写成字符串形式。

示例代码：

Component({
  options: {
    pureDataPattern: /^_/
  },
  properties: {
    a: Boolean,
    _b: {
      type: Boolean,
      observer() {
        // 不要这样做！这个 observer 永远不会被触发
      }
    },
  }
})

使用数据监听器监听纯数据字段

通过使用数据监听器，可以对纯数据字段进行监听并响应其变化改变界面表现。

示例代码：

Component({
  options: {
    pureDataPattern: /^timestamp$/ // 将 timestamp 属性指定为纯数据字段
  },
  properties: {
    timestamp: Number,
  },
  observers: {
    timestamp: function () {
      // timestamp 被设置时，将它展示为可读时间字符串
      var timeString = new Date(this.data.timestamp).toLocaleString()
      this.setData({
        timeString: timeString
      })
    }
  }
})