目錄

• 示例
• 方式一：delete刪除
• 方式二：解構
• 補充
• 總結

Thinking系列，旨在利用10分鐘的時間傳達一種可落地的思想。

業務開發中，我們經常會遇到：基於後端返回介面資料，前端儲存到物件Object中，前端開發過程中為了一些場景的便利性，需要在該物件中增加相應的屬性，但這些屬性對於後端沒有意義，儲存提交時希望刪除掉。

真實業務程式碼：儲存前需要刪除對應的*Value欄位

async saveData (type,data) {
  // 提交時刪除多餘欄位
  delete data.isCommonValue
  delete data.isRemoteValue
  await this.$request({
    ...API.EDIT_SERVICE,method: type === 'add' ? 'post' : 'put',data
  })
}

上述是大家普遍的寫法，但部分場景下上述寫法並不是最優寫法，且可能會帶來一些副作用。下面通過示例的方式闡述一下：

示例

為了更好的www.cppcns.com展示上述情況，我們重新編寫示例（僅為說明實現）。

let person = {
  id: '001',name: 'ligang',email: '[email protected]'
}

訴求：在提交給後端時，需要刪除email欄位。

方式一：delete刪除

同上述給到的業務程式碼處理方式一樣

delete person.email
console.log(person)	// {id: '001',name: 'ligang'}

原資料中的相關屬性也會刪除掉。

Reflect.deleteProperty()允許用於刪除屬性，同上述delete行為一致。

Reflect.deleteProperty(person,'email')

方式二：解構

形成新的物件，避免在引用原始物件的地方產生副作用。

let {id,name} = person
let newPerson = {id,name}
console.log(newPerson) // {id: '001',name: 'ligang'}

會和原資料切斷引用。對於保留屬性個數少，該方式處理簡單且易懂；保留屬性過多的場景會比較複雜。

let {email,...newPerson} = person
console.log(newPerson) // {id: '001',name: 'ligang'}

會和原資料切斷引用。對於保留屬性個數多，該方式處理簡單且易懂；保留屬性過少的場景會比較複雜。

補充

對於已經建立的例項， 不允許動態新增根級別的響應式 property。下述方式都無效！

this.$set(this,'email','')
this.$set(this.$data,'')

總結

實際使用中，強烈建議方式二來操作，不要影響原資料。特別是在mvvm框架中，原資料往往是響應式的，delete/deleteProperty意味著切斷“響應關係”，delete操作之後的資料響應就會有問題。

data () {
  return {
    person: {
      name: 'ligang',email: '[email protected]'
    }
  }
},methods: {
	deleteProp () {
  	delete this.person.email
    // this.$delete(this.person,'email')
	},addProp () {
  	this.person.email = 'xxx'
    this.$set(this.person,'address','xxx')
  }
}

1.執行delete操作， 物件屬性剔除掉了，但頁面沒有及時響應，可以使用 vue 中的this.$delete()確保刪除能觸發更新檢視

2.執行add操作，重新新增 email 及 address 屬性

1.this.person.email = 'xxx'並不具備響程式設計客棧應式

2.this.$set(this.person,'xxx')具備響應式

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！