小程序数据监听(observers),避免赋值死循环

2019 年 11 月 14 日

在小程序开发过程中，我们通过 observers 监听处理 properties 组件数学列表的过程中，免不了对当前数据进行处理在我们对监听的数据进行赋值时候，会造成死循环，其实这个问题在大多数框架中都有这个问题。

小栗子 🌰[错误示范]

   properties: {
    playlist: {
      type: Object
    }
  },
  // 数据监听
  observers: {
    ['playlist.playCount'] (count) {
      this.setData({
        ['playlist.playCount']: this._tranNumber(count, 2)
      })
    }
  },

小栗子 🌰[正确示范]


data: {

  // 数据监听
  observers: {
    ['playlist.playCount'] (count) {
      this.setData({
        _count: this._tranNumber(count, 2)
      })
    }
  },
    // 避免监听器 赋值死循环
    _count: 0
  },

原因就是 playlist.playCount 这个数据是监听状态如果 playlist.playCount 改变就会触发这个方法，如果在 setData 中给原数据赋值他就会不断的触发这个方法，从而导致死循环
所以解决方案就是在组件 data 中定义一个变量接受这个新的值，然后在页面中使用 data 中的值在这里也就是 _count

Ruoduan' Blog