Vue.js中的set方法可以幫助我們在數(shù)組中添加新的元素或者修改已有元素。這個方法是Vue.js的一個觀察者方法,可以在當(dāng)前對象上加上一個監(jiān)視器,監(jiān)聽對象內(nèi)部數(shù)據(jù)的變化,并及時地更新視圖。
// 代碼示例 Vue.set(vm.obj, 'key', value); Vue.set(vm.arr, indexOfArray, value);
如果不使用Vue.js的set方法,直接修改數(shù)組中的元素,Vue.js是無法檢測到這個變化的,因而不會及時更新視圖。這是因為Vue.js在渲染模板時,會對數(shù)據(jù)對象進行讀取與遍歷,如果對象的某個屬性沒有在這個過程中讀取到,那么觀察者就無法對這個屬性實現(xiàn)監(jiān)聽。
Vue.js的set方法在讀取數(shù)據(jù)時,會在觀察者上添加對象屬性的依賴關(guān)系,并將這個依賴關(guān)系與當(dāng)前的實例關(guān)聯(lián)起來。這個關(guān)聯(lián)關(guān)系就是計算屬性和偵聽屬性實現(xiàn)的基礎(chǔ)。這樣就能夠確保數(shù)據(jù)發(fā)生更改時,依賴于這個數(shù)據(jù)的組件會得到通知,進行更新。
set方法有兩個參數(shù),第一個參數(shù)是要進行修改的對象,第二個是對象的屬性名稱/數(shù)組的下標(biāo),第三個是要設(shè)置的值。當(dāng)設(shè)置數(shù)組下標(biāo)時,Vue.js同樣會將這個數(shù)組下標(biāo)屬性的依賴關(guān)系添加到對象的依賴關(guān)系列表中。
// 代碼示例 Vue.set(vm.obj, 'key', value); Vue.set(vm.arr, indexOfArray, value);
除了Vue.set方法,Vue.js還提供了另一個方法——Vue.delete方法。這個方法可以刪除數(shù)組中的指定元素,同樣可以被觀察者監(jiān)測到數(shù)組的變化,實現(xiàn)及時更新視圖。這個方法的參數(shù)也有兩個,第一個是要進行修改的對象,第二個是對象的屬性名稱/數(shù)組的下標(biāo)。
// 代碼示例 Vue.delete(vm.obj, 'key'); Vue.delete(vm.arr, indexOfArray);
使用Vue.js的set方法和delete方法對數(shù)組進行操作是非常方便和可靠的。它們可以實現(xiàn)Vue.js內(nèi)部的數(shù)據(jù)雙向綁定,同時讓您在編寫Vue.js組件時也更加靈活。您可以更加自由地在組件中操作數(shù)據(jù),而不是被迫受限于Vue.js的渲染模板。