对于黑马程序员微信小程序课程中自定义tabbar图标闪烁的理解

最近在学习b站黑马程序员的小程序课程,在学习基础知识接近尾声时,我自己发现了一个问题,老师讲的也并不是很清晰,弹幕也有对此有疑问,我仔细想了想,根据自己的理解,感觉大概应该是这么回事

自定义tabbar,在app.json文件的list中声明custom节点,在根目录中创建custom-tab-bar文件夹,在此目录下创建index组件,在编写index组件中使用了vant weapp第三方插件,在app.json中导入包,编辑index.wxml具体代码如下

//index.wxml
<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#13A7a0">
  <van-tabbar-item  wx:for="{{list}}" wx:key="index" info="{{item.info?item.info:''}}">
    <image
      slot="icon"
      src="{{item.iconPath}}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    <image
      slot="icon-active"
      src="{{item.selectedIconPath}}"
      mode="aspectFit"
      style="width: 25px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>
 
</van-tabbar>

通过onchange方法中的active触发底部tabbar图标颜色的变换(通过鼠标点击)和页面的跳转,active的默认值设置在index.js文件中,onchange方法如下,

 methods: {
    onChange(event) {
     



       //此处中间部分的以下两行就是问题的所在
      // this.setData({ active: event.detail });
      this.updateActive(event.detail)




      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    },

  }

如果将active设置在组件的data中,在点击事件开始后,底部的图标将先开始跳转,也就是变成选中图标,然后页面跳转,可是图标又变成未选中图标,选中图标为上次的选中图标,我很不理解,老师直接给出了将active变量设置在store外部全局共享数据中,通过调用store中的方法,同时将传递的值传给store中的active将变化的值又映射到组件index.js中,active的值并不会发生变化,所以图标的变亮和跳转页面是同步发生的,可是定义到index.js中,执行完跳转页面后,页面会进行刷新,也就是active的值会回到上一次的值当中,也就是使用了store.js全局数据共享,保证了active的不变,只有像java一样调用store.js接口中的方法,才可以改变active的值

以上仅代表个人看法,如有大神或者老师,请多指教