微信小程式中的值傳遞

myskies發表於2023-05-02

在使用微信小程式的過程中,發現頁面向元件中傳值或是父子元件中傳值並不值傳遞,本文透過程式碼實驗旨在弄明白值在傳遞過程中發生的變化。

首先建立一個如下的資料測試類:

export class TestModel {
  public _data = 1;
  get data() {
    console.log('call get data');
    if (this._data === 1) {
      this._data = Math.random();
    }
    return this._data;
  }
}

然後在C層中使用如下測試語句:

    const model = new TestModel();
    const model1 = new TestModel();
    console.log(model.data);
    console.log(model1._data);
    this.setData({
      testModel:  model
    });
    console.log(model === this.data.testModel);

最終的執行結果如下:

image.png

結論:在呼叫setData方法時,物件的clone僅限於屬性(猜沒是用了object 轉json然後json又轉成了object),方法是不會被clone的。我猜這也是為什麼微信小程式在元件傳值時,型別僅支援Object但不支援Interface的原因。

而至於為什麼會這樣,官方是這麼解釋的:
image.png

既然是兩個程式,那麼在傳値時便只能進行序列化與反序列化了,這時是值傳遞也就不足為奇了。

如果真是這樣的話,相信如下的情況會報stack異常:

export class BarModel {
  public fooModel: FooModel;
}
export class FooModel {
  public barModel: BarModel;
}
  onLoad() {
    const barModel = new BarModel();
    const fooModel =  new FooModel();
    barModel.fooModel = fooModel;
    fooModel.barModel = barModel;
    this.setData({
      fooModel: fooModel
    });
  },

image.png

原因則是在序列化時發生了cycle迴圈。

相關文章