微信小程序 -自定义组件中的“薛定谔”数组

前言

如下图所示：

不直接打印它的时候它存在值，一打印就为空。

小程序的生命周期

按照小程序的开发文档来说，在attached生命周期中进行数据的初始化。这里我的需求就是当组件加载的时候对传入的数组进行分类处理。结果发现在attached生命周期中传进去的参数竟然是如同薛定谔一般的幽灵数组。

BUG的来源

在对properties添加Observer监听之后，发现在attached生命周期时只是对properties进行了初始化，将里面的值初始化为定义的value值。实际上我们的log的this.properties其实是this.data，如小程序的文档所说，attached生命周期是初始化的data。这里应该类似于vue的data改造，将this.properties与this.data绑定起来。

解决办法

为了正确的拿到properties中传入的值，利用Observer监听。

  properties: {
    products: {
      type: Array,
      value: [],
      observer(val, old){
        if(val.length){
          let computed = this.computed();
          this.setData({ ...computed })
        }
      }
    }
  },

另一种解决办法就是，利用自定义组件的ready生命周期。