微信小程式中的值傳遞

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迴圈。

相關文章