uni-app 偶现无法动态设置class的bug

业务场景

原代码

template 代码如下：
 <view class="footer-operate" :class="{'iphonex_bottom' : isIphonex}" v-if="move">
    <view class="" @tap="cancel">
        <text>取消</text>
    </view>
    <view :class="[{ 'moveActive': selectArr.length > 0 }]"  @click="moveStu">
        <text>移动({{selectArr.length}})</text>
    </view>
</view>

 data() {
        return {
          selectArr:[]
        }
    }

 methods如下：
  handleSelect(item,index){
            let arr = this.selectArr
            item.select = !item.select
            this.$set(this.stuList,index,item)
            arr.push(item)
            this.selectArr = arr.filter(item=>item.select)
   }

问题描述

原代码中，操作点击增选后，数量变化了，但是class没有设置成功；点击操作取消选中，则能设置成功。

问题查找

data里面selectArr默认是空数组，当我选择第一个的时候，this.selectArr = [...]，但是不会触发class，需要把data里面的selectArr默认是null才行，原因不明，可能是新增的时候，uni-app无法监听到数据变化。

解决一

只对方法handleSelect做调整，如下：

let arr = this.selectArr
item.select = !item.select
this.$set(this.stuList,index,item)
arr.push(item)
this.selectArr = null
setTimeout(()=>{
     this.selectArr = arr.filter(item=>item.select)
},0)

解决二

使用computed，改动如下：

selectArr.length > 0  改为  listLength > 0

增加：
computed:{
    listLength() {
            return this.selectArr.length
    }
},

解决三

template 代码如下：
 <view class="footer-operate" :class="{'iphonex_bottom' : isIphonex}" v-if="move">
    <view class="" @tap="cancel">
        <text>取消</text>
    </view>
    <view :class="[{ 'moveActive': flag > 0 }]"  @click="moveStu">
        <text>移动({{selectArr.length}})</text>
    </view>
</view>

 data() {
        return {
          selectArr:[],
          flag:false,
        }
    }

 methods如下：
   handleSelect(item,index){
            let arr = this.selectArr
            item.select = !item.select
            this.$set(this.stuList,index,item)
            arr.push(item)
            this.selectArr = arr.filter(item=>item.select)
            this.flag =  this.selectArr.length > 0 ? true : false
   }

uni-app

地址 : uniapp.dcloud.io/