Vue.set( target, key, value ) 设置数组元素/向响应式对象添加属性

本文介绍Vue.set( target, key, value ) 的两个功能：1. 设置数据数组对象元素； 2.向响应式对象添加属性

[code]<div id="div">
<p >{{items}}</p>
</div>

<script>

var vm = new Vue({
el:"#div",
data: {
items: ['a', 'b', 'c']
}
});

Vue.set(vm.items,2,"ling")

</script>

1. 设置数组元素

Vue.set(vm.items,2,"ling") : 表示 把vm.items  这个数组的下标为2 的元素，改为"ling"

把数组  ["a","b","c"] 修改 后是 ["a","b","ling"] 

注意：

这里的意思是，set 这个方法只能用于data 里面的子数组对象，而不能直接用于data (这个根数据)或 者vue 实例

2.向响应式对象添加属性

[code]<div id="div">
<p >{{person}}</p>
</div>

<script>
var vm = new Vue({
el:"#div",
data: {
person:{
name:"ling",
job:"engineer"
},

created:function(){
alert(this.person.age)
}
});

Vue.set(vm.person,"age","26")
</script>

var vm = new Vue({
el:"#div",
data: {
    person:{    
            name:"ling",
            job:"engineer"
    },

created:function(){
        alert(this.person.age)
  }
});

Vue.set(vm.person,"age","26") 

注意：person 是data 里面的子对象，所以可以使用 Vue.set( ) 方法。data 这个根对象就不能使用 set 方法

说明：控制台可以在person 里找到age 这个属性，说明添加成功 (响应式)

 对比非响应式方法：

vm.food="chocolate"
alert(vm.food)

控制台和网页上的 {{person}} 都没有显示food 这个属性，说明food 这个属性没有被添加 （非响应式）