---
title: 纯数据字段
summary: "介绍纯数据字段的概念和用法，通过 pureDataPattern 指定不参与界面渲染的数据字段以提升页面更新性能。"
questions:
  - 纯数据字段的作用是什么？
  - 如何通过 pureDataPattern 指定纯数据字段？
  - pureDataPattern 的值应该是什么类型？
  - 纯数据字段是否参与界面渲染？
  - 属性中的纯数据字段的 observer 会被触发吗？
  - 如何监听纯数据字段的变化？
  - 使用纯数据字段对页面更新性能有什么帮助？
  - 纯数据字段可以通过 this.data 获取吗？
---

纯数据字段是一些不用于界面渲染的 `data` 字段，可以用于提升页面更新性能。

## 组件数据中的纯数据字段

有些情况下，某些 `data` 中的字段（包括 `setData` 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。

此时，可以指定这样的数据字段为 **纯数据字段**。它们将仅仅被记录在 `this.data` 中，而不参与任何界面渲染过程，这样有助于提升页面更新性能。

指定 **纯数据字段** 的方法是在 `Component` 构造器的 `options` 定义段中指定 `pureDataPattern` 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段。

**示例代码：**

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

上述组件中的纯数据字段不会被应用到 `TYML` 上：

```xml
<view ty:if="{{a}}"> 这行会被展示 </view>
<view ty:if="{{_b}}"> 这行不会被展示 </view>
```

## 组件属性中的纯数据字段

属性也可以被指定为纯数据字段，即遵循 `pureDataPattern` 的正则表达式。

属性中的纯数据字段可以像普通属性一样接收外部传入的属性值，但不能将它直接用于组件自身的 `TYML` 中。

**示例代码：**

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

**注意**：属性中的纯数据字段的属性 `observer` 永远不会触发！如果想要监听属性值变化，使用 [数据监听器](/cn/miniapp/develop/miniapp/framework/custom-component/observers) 代替。

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

[数据监听器](/cn/miniapp/develop/miniapp/framework/custom-component/observers) 可以用于监听纯数据字段（与普通数据字段一样）。这样，可以通过监听、响应纯数据字段的变化来改变界面。

下面的示例是一个将 `JavaScript` 时间戳转换为可读时间的自定义组件。

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

```xml
<view>{{timeString}}</view>
```