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
    })
  }
}

解決方法大概是狀態改變了後切換組件的狀態,當符合條件,則重新渲染即可,試了一下,是塊老鐵,沒毛病。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章