vue2如何使用vue.set？

vue的Vue.set方法的使用

Vue.set有两个功能：1. 设置数据数组对象元素； 2.向响应式对象添加属性

Vue.set( target, propertyName/index, value )

参数：

{Object | Array} target
{string | number} propertyName/index
{any} value

返回值：设置的值。

用法：

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

1. 设置数组元素

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

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

注意：

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

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

<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 方法