微信小程序開發(fā)純數(shù)據(jù)字段

微信小程序可以使用純數(shù)據(jù)字段來提升頁面更新性能，本文將圍繞純數(shù)據(jù)字段展開討論。

組件中的純數(shù)據(jù)字段

在組件中，某些不需要展示在界面上的數(shù)據(jù)字段可以指定為純數(shù)據(jù)字段，它們只被記錄在this.data中并不參與任何界面渲染過程。通過在Component構(gòu)造器的options定義段中指定pureDataPattern為正則表達(dá)式，合法命名的字段將成為純數(shù)據(jù)字段。

示例代碼：

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 開頭的數(shù)據(jù)字段為純數(shù)據(jù)字段
  },
  data: {
    a: true, // 普通數(shù)據(jù)字段
    _b: true, // 純數(shù)據(jù)字段
  },
  methods: {
    myMethod() {
      this.data._b // 純數(shù)據(jù)字段可以在 this.data 中獲取
      this.setData({
        c: true, // 普通數(shù)據(jù)字段
        _d: true, // 純數(shù)據(jù)字段
      })
    }
  }
})

上述組件中的純數(shù)據(jù)字段不會出現(xiàn)在WXML中進(jìn)行展示。

組件屬性中的純數(shù)據(jù)字段

除了在組件中定義外，屬性也可以使用純數(shù)據(jù)字段，但不能直接用于組件自身的 WXML 中，屬性監(jiān)聽器永遠(yuǎn)不會觸發(fā)。從小程序基礎(chǔ)庫版本2.10.1開始，還可以在頁面或自定義組件的json文件中配置pureDataPattern，此時(shí)其值應(yīng)當(dāng)寫成字符串形式。

示例代碼：

Component({
  options: {
    pureDataPattern: /^_/
  },
  properties: {
    a: Boolean,
    _b: {
      type: Boolean,
      observer() {
        // 不要這樣做！這個(gè) observer 永遠(yuǎn)不會被觸發(fā)
      }
    },
  }
})

使用數(shù)據(jù)監(jiān)聽器監(jiān)聽純數(shù)據(jù)字段

通過使用數(shù)據(jù)監(jiān)聽器，可以對純數(shù)據(jù)字段進(jìn)行監(jiān)聽并響應(yīng)其變化改變界面表現(xiàn)。

示例代碼：

Component({
  options: {
    pureDataPattern: /^timestamp$/ // 將 timestamp 屬性指定為純數(shù)據(jù)字段
  },
  properties: {
    timestamp: Number,
  },
  observers: {
    timestamp: function () {
      // timestamp 被設(shè)置時(shí)，將它展示為可讀時(shí)間字符串
      var timeString = new Date(this.data.timestamp).toLocaleString()
      this.setData({
        timeString: timeString
      })
    }
  }
})

<view>{{timeString}}</view>

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標(biāo)明：himall原創(chuàng)>