set方法引出一系列故事

前言

編寫vue代碼的要求，要求在頁面上實現添加更改數據，頁面能同步更新數據。vue中提供了set方法，這個方法不僅用於數組也用於對象。除此之外，關於數組還可以通過數組的變異方法、數組的引用方法來實現。對象的話就還有對象引用方法可達到此目的。

set方法

1，對象中使用

1）全局法

Vue.set(vm.userInfo,"address","beijing")

2）實例方法

vm.$set(vm.userInfo,"address","beijing")

2，數組中使用

1)全局方法

Vue.set(vm.userInfo,1,5)

2)實例方法

vm.$set(vm.userInfo,2,10)

引用方法

舉例，可通過調用以下引用向數組/對象添加數據，且頁面也會更新：

vm.userInfo = {
                name: "Dell",
                age: 28,
                gender:"male"

               }

數組的變異方法

變異方法vue中提供了7個，以方便我們操縱。如：

1）pop

把數組最後一項刪除掉

2）push

往數組裏增加一條

3）shift

用於把數組的第一個元素從其中刪除，並返回第一個元素的值

4）unshift

可向數組的開頭添加一個或更多元素，並返回新的數組長度

5）splice

做數組的截取

6）sort

對數組進行排序

7）reverse

對數組進行取反

splice示例：

vm.list.splice(1,1,{id:"333",text:"dell"})

其含義：從索引爲1的地方截取掉，然後再增加一條數據，頁面同步更新。