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对象。
结论:同一个组件中,外部声明的全局变量,在所有页面的该组件中都是共享的。

image.png

正确做法:

别偷懒,在每一个需要用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。

所有页面到同一个组件都是共享这个全局变量到

上一篇下一篇

猜你喜欢

热点阅读