官网说明

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

  • 参数
    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value
  • 返回值:设置的值。
  • 用法
    向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

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

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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”]

image.png

2 向响应式对象添加属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

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

image.png

image.png

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

**

对比非响应式方法

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

image.png

控制台和网页上的 都没有显示food 这个属性,说明food 这个属性没有被添加 (非响应式)


image.png**