微信小程序开发纯数据字段
微信小程序可以使用纯数据字段来提升页面更新性能,本文将围绕纯数据字段展开讨论。
组件中的纯数据字段
在组件中,某些不需要展示在界面上的数据字段可以指定为纯数据字段,它们只被记录在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电商交易系统供销一体化,提高市场集中度 集团管控一体化,有效实现供需匹配 移动应用一体化,提高运营综合效率
上下游资源整合数字化解决方案,赋能产业供应链,构建产业互联网生态体系。
免费试用系统
