---
title: Pure Data Field
---

Pure data fields are the `data` fields that do not participate in interface rendering. They can be used to improve the update performance of pages.

## Pure data fields in the component data

In some cases, some fields in `data` (including fields set by `setData`) are neither displayed on the interface nor passed to other components, but are only used inside the current component.

Such data fields can be specified as **pure data fields**. They will only be recorded in `this.data` without participating in any UI rendering process. This helps to improve the update performance of pages.

To specify a **pure data field**, you can specify `pureDataPattern` as a regular expression in the `options` definition field of the `Component` constructor. Fields whose names conform to this regular expression will become pure data fields.

**Sample code:**

```js
Component({
  options: {
    pureDataPattern: /^_/, // Specify all data fields starting with an underscore ( _ ) as pure data fields
  },
  data: {
    a: true, // General data field
    _b: true, // Pure data field
  },
  methods: {
    myMethod() {
      this.data._b; // Pure data fields can be obtained in this.data
      this.setData({
        c: true, // General data field
        _d: true, // Pure data field
      });
    },
  },
});
```

The pure data fields in the above components will not be applied to `TYML`:

```xml
<view ty:if="{{a}}"> This line will be displayed </view>
<view ty:if="{{_b}}"> This line will not be displayed </view>
```

## Pure data fields in the component property

A property that conforms to `pureDataPattern` regular expression can also be specified as a pure data field.

Just like a general property, a pure data field in the property can receive a property value passed in from the outside. However, the property value cannot be used directly in the `TYML` of the component.

**Sample code:**

```js
Component({
  options: {
    pureDataPattern: /^_/,
  },
  properties: {
    a: Boolean,
    _b: {
      type: Boolean,
      observer() {
        // Do not do this! This observer will never be triggered.
      },
    },
  },
});
```

**Note**: The `observer` property in the pure data fields will never be triggered. You can use a [data listener](/en/miniapp/develop/miniapp/framework/custom-component/observers) to monitor the changes in the property value.

## Use a data listener to listen for pure data fields

[A data listener](/en/miniapp/develop/miniapp/framework/custom-component/observers) is used to listen for the pure data fields, just like listening for a general data field. In this way, you can implement interface changes by listening for and responding to changes in pure data fields.

The example below shows how to convert a `JavaScript` timestamp to a custom component with readable time.

```js
Component({
  options: {
    pureDataPattern: /^timestamp$/, // Specify the timestamp property as a pure data field
  },
  properties: {
    timestamp: Number,
  },
  observers: {
    timestamp: function () {
      // When the timestamp is set, show it as a readable time string
      var timeString = new Date(this.data.timestamp).toLocaleString();
      this.setData({
        timeString: timeString,
      });
    },
  },
});
```

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