vue关于更新数据后强制组件重新渲染

想必大家都遇到了在vue项目中更新了data数据后视图并不会更新的问题。 我遇到这个主要是在一个weex的UI组件库项目中,因为组件库一部分组件是使用vue在weex下实现的,一部分组件是原生实现的,即不需要导入直接传值使用,移动端原生app会自动解析数据渲染,我这里是使用了原生的组件做了一个示例修改了数据后原生组件视图并没有更新,主要功能是根据状态码判断是否显示当前组件,define-view为自定义组件:
伪代码如下:

<div v-if="chartIsShow" v-if="statusCode==2||statusCode==4||statusCode==5">
  <define-view  :data="Config" ></define-view>
</div>

用了几中常规的办法都不能解决
因为更新的是对象类型的数组所以顺其自然使用了Vue.set,第一种,没有效果

this.$set(this.xxxData, 'params', value)

第二种:强制渲染,即更新数据后强制重新渲染组件也没效果

this.$forceUpdate()

都无效,但是我发现是只要切换组件的v-if状态后就会渲染成功一次,如果同种状态修更新数据那就不会成功,所以一定要在更改数据后重新渲染组件才可以,于是想到了 nextTick,代码如下:

statusCode(newVal){
  this.chartIsShow = false
  if (newVal==2||newVal==4||newVal == 5) {
    this.$nextTick(()=>{
        this.chartIsShow = true
    })
  }
}

解决方法大概是状态改变了后切换组件的状态,当符合条件,则重新渲染即可,试了一下,是块老铁,没毛病。

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kirinlau

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值