支付宝小程序监控props更新

1,609 阅读1分钟

思路如下:

主要使用deriveDataFromProps生命周期函数, 将props中的数据, 转存到data中一份, 然后在deriveDataFromProps函数中比对两者是否相同, 不同即代表发生了改变.

微信小程序并不需要,微信小程序的properties中存在observer, 可以监听props变化

示例代码:

Component({
  /**
   * 组件的属性列表
   */
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    searchText: ''
  },
  // props更新
  deriveDataFromProps(nextProps) {
    const newVal = nextProps.text;
    // 只有当text发生更新的时候,才请求数据,并更新页面
    if (this.data.searchText !== newVal) {
      // 处理逻辑
    }
  }
})