在表單設(shè)計(jì)和流程設(shè)計(jì)時(shí)，碰到多層數(shù)據(jù)響應(yīng)式失效問(wèn)題，當(dāng)時(shí)也是一臉懵，找不到錯(cuò)在哪里，運(yùn)行代碼不報(bào)錯(cuò)，就是不能響應(yīng)式更新視圖了。

特此記錄一下填坑過(guò)程。

1、數(shù)據(jù)初始化結(jié)構(gòu)被破壞

表單配置需要config屬性，初始化時(shí)對(duì)象里沒(méi)有，導(dǎo)致vue響應(yīng)式失效，因?yàn)樵陧?yè)面完成渲染之后，vue就已經(jīng)完成了響應(yīng)式綁定，對(duì)于監(jiān)聽(tīng)且沒(méi)有屬性的字段將會(huì)失去數(shù)據(jù)的響應(yīng)式，從而無(wú)法實(shí)時(shí)更新視圖。

先看看這個(gè)對(duì)象，是修復(fù)之前的結(jié)構(gòu)。

formDesign： {
	process：{},
	list: []
}

修復(fù)后的數(shù)據(jù)結(jié)構(gòu)，每一個(gè)需要響應(yīng)式的屬性，初始化頁(yè)面時(shí)都需要正確的結(jié)構(gòu)。

否則將失去響應(yīng)式的后果。

formDesign： {
	process：{},
	list: [],
	config: {}
}

2、js-delete刪除未觸發(fā)數(shù)據(jù)更新

在調(diào)用js刪除vue的data的數(shù)據(jù)后，既是傳入組件的data綁定sync屬性和watch監(jiān)聽(tīng)都將變成徒勞的，因?yàn)閖s的delete更新不是鏈?zhǔn)巾憫?yīng)式的，不會(huì)觸發(fā)vue的響應(yīng)式數(shù)據(jù)驅(qū)動(dòng)更新視圖。

當(dāng)然這里針對(duì)是多層次數(shù)據(jù)結(jié)構(gòu)，尤其是在流程設(shè)計(jì)，遞歸展示視圖和操作數(shù)據(jù)時(shí)最為常見(jiàn)。

解決辦法

使用vue的Vue.delete( target, propertyName/index )

官方解釋

• 刪除對(duì)象的 property。
• 如果對(duì)象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。
• 這個(gè)方法主要用于避開(kāi) Vue 不能檢測(cè)到 property 被刪除的限制，但是你應(yīng)該很少會(huì)使用它。

官方解釋—深層響應(yīng)性

在 Vue 中，狀態(tài)都是默認(rèn)深層響應(yīng)式的。

這意味著即使在更改深層次的對(duì)象或數(shù)組，你的改動(dòng)也能被檢測(cè)到。

你也可以直接創(chuàng)建一個(gè)淺層響應(yīng)式對(duì)象。

它們僅在頂層具有響應(yīng)性，一般僅在某些特殊場(chǎng)景中需要。

export default {
  data() {
    return {
      obj: {
        nested: { count: 0 },
        arr: ['foo', 'bar']
      }
    }
  },
  methods: {
    mutateDeeply() {
      // 以下都會(huì)按照期望工作
      this.obj.nested.count++
      this.obj.arr.push('baz')
    }
  }
}

總結(jié)

每一個(gè)需要響應(yīng)式的屬性，初始化頁(yè)面時(shí)都需要正確的data結(jié)構(gòu)，不管數(shù)據(jù)結(jié)構(gòu)是否復(fù)雜，都應(yīng)該保持Vue響應(yīng)式的數(shù)據(jù)規(guī)范，避免踩坑，否則將失去響應(yīng)式的后果。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論