在使用微信小程式的過程中,發現頁面向元件中傳值或是父子元件中傳值並不值傳遞,本文透過程式碼實驗旨在弄明白值在傳遞過程中發生的變化。
首先建立一個如下的資料測試類:
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);
最終的執行結果如下:
結論:在呼叫setData
方法時,物件的clone僅限於屬性(猜沒是用了object 轉json然後json又轉成了object),方法是不會被clone的。我猜這也是為什麼微信小程式在元件傳值時,型別僅支援Object但不支援Interface的原因。
而至於為什麼會這樣,官方是這麼解釋的:
既然是兩個程式,那麼在傳値時便只能進行序列化與反序列化了,這時是值傳遞也就不足為奇了。
如果真是這樣的話,相信如下的情況會報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
});
},
原因則是在序列化時發生了cycle迴圈。