2016-04-16 366 views
5

我已經仔細閱讀並重新閱讀Vue文檔"Reactivity in Depth"和API vm.$setVue.set但我仍然很難確定何時使用哪個。對我來說能夠區分這兩者非常重要,因爲在我當前的Laravel項目中,我們正在動態地設置很多對象的屬性。

在文檔的區別似乎是虛擬機的語言之間$集「對於Vue的實例」,而Vue.set是「對於純數據對象」和Vue.set是全球性的。

但是,有些方法可以在創建實例後添加屬性並使其成爲活動狀態。

對於Vue的情況下,你可以使用$組(路徑,值)實例方法:

vm.$set('b', 2) 
// `vm.b` and `data.b` are now reactive 

對於純數據對象,您可以使用全局Vue.set(對象,關鍵, 值)方法:

Vue.set(data, 'c', 3) 
// `vm.c` and `data.c` are now reactive 

最後,我想知道如果做上述(這是用於將M的第三「選項」可以同時使用多個屬性)作爲上述2個選項中的任何一個的等價替代(通過添加1個屬性而不是多個)?

有時您可能想要爲現有對象指定若干屬性,例如使用Object.assign()或_.extend()。 但是,添加到對象的新屬性不會觸發更改。 在這種情況下,會造成與兩個 原始對象和混入對象屬性一個新的對象:

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })` 
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 
+0

我沒有得到你的問題。你說,vm。$ set是用於實例的,Vue.set是用來定義被動數據的。 –

+0

如果你可以解釋兩者之間的區別以及第三種選擇如何適用,那麼你可以回答我的問題 – user3089840

回答

4

這裏的發佈說明,隨着引進Vue.set跑到:

Vue不再使用$ set和$ delete方法擴展Object.prototype。 這在一些條件檢查中依賴於這些 屬性的庫(例如Meteor中的minimongo)一直造成問題。 (key,value)和object。$ delete(key),使用新的全局方法Vue.set(object,key,value)和Vue.delete(key, key)。

所以,.$set使用可用的所有對象 - 它現在僅在視圖模型本身提供。 Vue.set因此用於那些現在引用被動對象但沒有對其所屬的視圖模型的引用的情況。

+0

謝謝大衛。那麼總是使用Vue.set會更好嗎?除了可以設置多於一個鍵/值的事實外,第三個選項如何適用於此? – user3089840

+1

我認爲第三種選擇實際上是一種性能折衷。 'Vue.set'和'vm。$ set'將成爲相當有針對性的操作,而新的對象分配方法將會更加昂貴。如果要向具有多個屬性的現有對象添加一個屬性,請使用其中一個設置的調用。如果您將很多屬性添加到只有少量現有屬性的對象中,請使用分配方法。 –

+1

@ David_K._Hess謝謝! – user3089840

相關問題