在使用微信小程序的过程中,发现页面向组件中传值或是父子组件中传值并不值传递,本文通过代码实验旨在弄明白值在传递过程中发生的变化。
首先建立一个如下的数据测试类:
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循环。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。