私域电商软件及相关增值服务提供商    

免费试用
微信小程序开发纯数据字段
作者: --时间: 2025-07-20 19:15:53 阅读量:

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

组件中的纯数据字段

在组件中,某些不需要展示在界面上的数据字段可以指定为纯数据字段,它们只被记录在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
      })
    }
  }
})
<view>{{timeString}}</view>
一套系统全搞定
  • 商家管理
  • 商品管理
  • 订单管理
  • 会员管理
  • 营销中心
  • 供应链入驻
  • 财务管理
  • 支付分账
  • 商城直播
免费试用
更多产品任你选
B2B2C多用户商城系统

类天猫&京东模式系统

了解更多
B2B2B电商交易系统

全渠道订货/采购及经销商管
理数字化系统

了解更多
S2B2B电商交易系统

上下游资源整合数字化解决方

了解更多
企业集采商城系统

中大型企业数字化采购与交易
系统

了解更多
员工福利商城系统

集福利管理、发放于一体的员
工福利商城

了解更多

电话咨询 微信咨询 0元开店