Thinking系列，旨在利用10分鐘的時(shí)間傳達(dá)一種可落地的編程思想。

業(yè)務(wù)開發(fā)中，我們經(jīng)常會(huì)遇到：基于后端返回接口數(shù)據(jù)，前端保存到對(duì)象 Object 中，前端開發(fā)過程中為了一些場景的便利性，需要在該對(duì)象中增加相應(yīng)的屬性，但這些屬性對(duì)于后端沒有意義，保存提交時(shí)希望刪除掉。

真實(shí)業(yè)務(wù)代碼：保存前需要?jiǎng)h除對(duì)應(yīng)的 *Value 字段

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

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

示例

為了更好的展示上述情況，我們重新編寫示例（僅為說明實(shí)現(xiàn)）。

let person = {
  id: '001',
  name: 'ligang', 
  email: 'xxx@x.com'
}

訴求：在提交給后端時(shí)，需要?jiǎng)h除 email 字段。

方式一：delete 刪除

同上述給到的業(yè)務(wù)代碼處理方式一樣

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

原數(shù)據(jù)中的相關(guān)屬性也會(huì)刪除掉。

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

Reflect.deleteProperty(person, 'email')

方式二：解構(gòu)

形成新的對(duì)象，避免在引用原始對(duì)象的地方產(chǎn)生副作用。

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

會(huì)和原數(shù)據(jù)切斷引用。對(duì)于保留屬性個(gè)數(shù)少，該方式處理簡單且易懂；保留屬性過多的場景會(huì)比較復(fù)雜。

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

會(huì)和原數(shù)據(jù)切斷引用。對(duì)于保留屬性個(gè)數(shù)多，該方式處理簡單且易懂；保留屬性過少的場景會(huì)比較復(fù)雜。

補(bǔ)充

對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式 property。下述方式都無效！

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

總結(jié)

實(shí)際使用中，強(qiáng)烈建議方式二來操作，不要影響原數(shù)據(jù)。特別是在mvvm框架中，原數(shù)據(jù)往往是響應(yīng)式的，delete/deleteProperty 意味著切斷“響應(yīng)關(guān)系”，delete 操作之后的數(shù)據(jù)響應(yīng)就會(huì)有問題。

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

1.執(zhí)行 delete 操作，js 對(duì)象屬性剔除掉了，但頁面沒有及時(shí)響應(yīng)，可以使用 vue 中的 this.$delete() 確保刪除能觸發(fā)更新視圖

2.執(zhí)行 add 操作，重新添加 email 及 address 屬性

1.this.person.email = 'xxx' 并不具備響應(yīng)式

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

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！

最新評(píng)論