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的地方截取掉，然后再增加一条数据，页面同步更新。