小程序子组件数据数据不更新

在子组件中封装了星星评分,在父组件中调用,有一个奇怪的问题 ;就是这个子组件在很多页面都有用到,每个页面都没有问题,但在detail页面的时候用了两次星星,头部的总是会出现未评分;内容区的星星又是正常的,

对数据打印后;发现是生命周期出现了问题,因为网络原因,数据头部数据还没有出来,子组件的attached 生命周期已加载;所以赋了默认的值,

解决方法:

使用: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

提供的observers方法来监听数据变化

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 星星评分的属性设置
    rate: {
      type: Number,
      value: 0
    },
    // 由用户来定义星星的大小和文字的大小
    starSize: {
      type: Number,
      value: 20, //rpx
    },
    fontSize: {
      type: Number,
      value: 20
    },
    fontColor: {
      type: String,
      value: '#ccc'
    },
    isText: {
      type: Boolean,
      value: true
    }
  },
  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {
    updataRate() {
      var that = this;
      //接收父组件传入的值
      let rate = that.properties.rate; //父组件传过来的评分共10分,根据评分判断星星数
      let intRate = parseInt(rate) //取整数,得到多少评分
      // console.log(intRate) //如6分
      // 除出来有可能是浮点,所以需要求整数,1分等于0.5个星星,需要除以2,得到星星个数
      //3个星星
      let light = parseInt(intRate / 2);
      let half = intRate % 2; //求半灰星,对传入过来的评分模于2,得出半星
      // console.log(light)
      // console.log(half)
      let gray = 5 - light - half; //一共5个星星,总星减去高亮的星星再减去一半亮亮的星星得出灰星
      // console.log(gray)
      // 对传过来的数据进行遍历,页面显示 
      let lights = [],
        halfs = [],
        grays = [];
      for (let i = 1; i <= light; i++) {
        lights.push(i)
      }
      for (let i = 1; i <= half; i++) {
        halfs.push(i)
      }
      for (let i = 1; i <= gray; i++) {
        grays.push(i)
      }
      // 对传进来的评分做判断,如果为0,显示为评分,如果评分但是是整数要保留一位小数
      rate = rate && rate > 0 ? rate.toFixed(1) + `分` : "未评分";
      this.setData({
        lights,
        halfs,
        grays,
        rates: rate
      })
    },
  },
  lifetimes: {
    // 组件生命周期声明对象，将组件的生命周期收归到该字段进行声明，原有声明方式仍旧有效，如同时存在两种声明方式，则lifetimes字段内声明方式优先级最高
    attached() {
      this.updataRate()
    }
  },
  observers: {
    'rate': function(rate) {
      // 在 rate被设置时，执行这个函数
      this.updataRate()
    }
  }
})