Vue – Vue.set() 与 vm.$set() 的应用

简介

set() 方法的作用是 Vue 在实例运行过程中，需要往数据中添加响应式数据使用的。

举例：当Vue 中存在数据 data:{ a:1 } 时，我们希望在Vue运行时往data:{}中添加响应式数据 b:2 时.

问题：由于Vue实例使用的是响应式数，如果直接在Vue实例中添加数据到 data 中时，因为Vue使用 get 和 set 方法实现响应式数据，如果直接在在Vue实例中添加数据将无法实现响应式数据效果。

解决：Vue为了解决在实例中添加响应式数据这个问题上，提供了静态方法 Vue.set() 方法和实例方法 vm.$set() 方法，实现响应数据。

set() 与 $set() 方法

set() 与 $set() 方法 是一样的方法，只是一是静态方法，一个是实例方法，使用的方法也是一致的。

实现方法如下：

vm.$set(target,prop,value)

Vue.set(target,prop,value)

target : 要为哪个数据添加响应式数据

prop : 添加的响应式数据变量名

value : 添加的响应式数据值。

实现效果；

data:{
     school:{
         name : "张三"
     }
},

如上面代码所示，student 对象中只包含 name 的属性，如果此时我们需要在 student 中增加一个响应式数据属性 age 时，通过调用以下代码，即可实时添加属性。

this.$set(this.student,'age',18);
或
Vue.set(this.student,'age',18)

会实时更新数据为以下结构：

data:{
   student:{
        name:"张三",
        age:18
    }
},

注意：set() 方法不允许直接在 Vue 实例，或 data 等Vue默认的根数据结构中添加！