Vue中的set 方法

2021-09-29 12:57:04 字數 1246 閱讀 7089

大家在寫vue前後端互動時不知道有沒有碰到過乙個問題,就是在data裡面定義乙個變數,然後從後台獲取資料後賦值給這個變數,但是對這個變數裡的物件的屬性或者陣列的元素進行修改時,發現資料能修改,但檢視不更新!

原因:vue管理的變數必須生成了get和set方法,如data中定義的變數,雖然直接通過賦值的物件有get、set方法,但是物件裡面的屬性或者元素並沒有get和set方法,所以vue不會根據他的屬性改變去更新檢視

例子如下:

迴圈遍歷變數物件中的陣列

定義乙個沒有內容的變數

頁面初始化時,構造乙個資料,並列印結果檢視listdata.data中的屬性是否有get和set方法

列印結果很明顯,data和name都有相應的get和set方法,但是data陣列裡面的元素就沒有了

此時,寫乙個方法去改變listdata.data的元素值,並列印結果檢視

很明顯,檢視沒有更新,但是列印結果中的元素值已經改變

解決辦法:

vue提供了兩種方法去解決

1、vue.set()

2、this.$set()

兩者區別在於,元件中可以直接使用this.$set(),如果使用vue.set(),就要import vue

引數有三個,第乙個引數是物件或陣列,如果是陣列,第二個引數就是陣列中的下標,如果是物件,第二個引數就是屬性名,第三個引數是修改的值

修改changelistdata方法,如下

檢視結果,發現檢視已更新

參考文件:

set在vue中的應用案例

vue中this.set在官方api中是這樣說的 引數 target propertyname index value 返回值 設定的值。用法 向響應式物件中新增乙個屬性,並確保這個新屬性同樣是響應式的,且觸發檢視更新。它必須用於向響應式物件上新增新屬性,因為 vue 無法探測普通的新增屬性 比如t...

vue 中 set與 delete的使用

vue無法檢測property的新增或移除,由於vue會在初始化例項時對property執行getter setter轉換,所以propterty必須在data物件上存在才能讓vue將它轉換為響應式的。例如 var vm new vue vm.a 是響應式的 vm.b 2 vm.b 是非響應式的對於...

C STL中set的常用方法

set模板類在標頭檔案 中使用前需要先引入標頭檔案。set集合容器實現了紅黑樹 red black tree 的平衡二叉檢索樹的資料結構,在插入元素時,它會自動調整二叉樹的排列,把該元素放到適當的位置,以確保每個樹根節點的鍵值大於左子樹所有節點的鍵值,而小於右子樹所有節點的鍵值 另外,還確保根節點左...