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

特此記錄一下填坑過程。

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

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

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

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

修復(fù)后的數(shù)據(jù)結(jié)構(gòu)，每一個需要響應(yīng)式的屬性，初始化頁面時都需要正確的結(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)聽都將變成徒勞的，因為js的delete更新不是鏈式響應(yīng)式的，不會觸發(fā)vue的響應(yīng)式數(shù)據(jù)驅(qū)動更新視圖。

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

解決辦法

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

官方解釋

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

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

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

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

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

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

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

總結(jié)

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

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

最新評論