component别用全局that保存this
2021-03-12 本文已影响0人
晓函
一般为了方便,保存页面的this对象,都会直接在外部写上一个that,加载都时候保存,如下。
var that;
Component({
attached:function(){ that=this;}
});
但是这样大多数时候都没问题,但是,最近发现小程序机制还是会导致出现bug
复现场景:
A页面包含组件x。
B页面包含组件x。
进入A页面,触发x的attached.
然后进入B页面后,触发x的attached,再返回A页面。
这时,我们发现全局that对象已经变化了,我们把that和this打印出来,wxExparserNodeId 的值都不一样,这时你调用that.setData()其实是不会刷新当前页面的ui。为什么呢?因为x组件中全局变量that存的B页面的x对象。
结论:同一个组件中,外部声明的全局变量,在所有页面的该组件中都是共享的。
正确做法:
别偷懒,在每一个需要用that的方法中,写上
var that = this;
原理:
还不明白?看这个演示吧。
test
var tempVal;
Component({
attached:function(){ tempVal=randint();}
});
A页面包含组件test,B页面也包含组件test。
打开A页面,打印出test组件tempVal的值,为123,
从A页面导航到B页面,打印出test组件tempVal的值,为456,
从B页面返回A页面,打印出test组件tempVal的值,为456。
所有页面到同一个组件都是共享这个全局变量到