Vue中对象的响应数据变化

2017年06月08日作者: 国瑞个人博客 326次浏览

在Vue中，我们只需要维护数据，而不用关心页面吗，所以经常会涉及到对对象的操作，例如在一个对象中没有该值，而需要添加该值，从而实现响应，接下来我就来介绍几种方法:

问题，给Vue中的对象添加数据的时候没有生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 

 
<div id="app">{{message}}
{{aiqianduan.blog}}</div>
 

<script>
let vm = new Vue({
el: "#app",
data: { //只有计划好的数据，才能做响应reactive
message: "天天做出好东西",
aiqianduan: {
}
}
})
//这样做不了响应
vm.aiqianduan.blog=1;
console.log(vm.aiqianduan);
</script>

Vue中对象的响应数据变化

这个时候我们发现，页面中我们给对象添加的属性blog没有生效，但是控制台打印出来的信息却显示该属性存在，为什么会出现这种情况呢，这种情况是由于只有计划好的数据，才能做响应reactive，下面我们来探讨一下解决方法:

解决方法一调用Vue的静态方法set (挂载在函数身上)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 

 
<div id="app">{{message}}
{{aiqianduan.blog}}</div>
 

<script>
let vm = new Vue({
el: "#app",
data: { //只有计划好的数据，才能做响应reactive
message: "天天做出好东西",
aiqianduan: {
}
}
})
//语法：Vue.set(target,prop,value) 参数1：目标对象参数二：属性参数3：值
Vue.set(vm.aiqianduan,"blog","我是爱前端博客");
console.log(vm.aiqianduan);
</script>

解决方法二调用实例上的方法 $set (挂载在实例身上)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 

 
<div id="app">{{message}}
{{aiqianduan.blog}}</div>
 

<script>
let vm = new Vue({
el: "#app",
data: { //只有计划好的数据，才能做响应reactive
message: "天天做出好东西",
aiqianduan: {
}
}
})
//语法：Vue.$set(target,prop,value) 参数1：目标对象参数二：属性参数3：值
//解决方法二调用实例上的方法 $set (挂载在实例身上)
vm.$set(vm.aiqianduan,"blog","我是爱前端博客");
console.log(vm.aiqianduan);
</script>

解决方法三改写属性的值，重新赋值

1	vm.aiqianduan = {blog:"新的"}; //会将原来对象的属性都覆盖掉

不过有弊端，原来所有的值都会被覆盖掉

解决方法四使用Object.assign合并多个对象为一个对象

1 2	vm.aiqianduan = Object.assign({}, vm.aiqianduan, { blog: "爱前端博客" }); console.log(vm.aiqianduan);

上述代码表示的就是将增加数据的对象和增加的数据统统添加到一个新的对象中，在将新的对象赋值给vue中那个需要添加数据的对象

这里还有一个误区，如下所示：

1
2
3

//相当于是给vm.aiqianduan这个对象添加一个属性，对象有这个值，但是不会响应
var o = Object.assign(vm.aiqianduan, { blog: "爱前端博客" });
console.log(o === vm.aiqianduan); //true 表示他们是同一个对象

在上述例子中，我们发现，他们的值也是相等的，但是为什么页面就是没有展现出来呢，因为数据不是开始就有的，而是后面添加的，只有计划好的数据，才能做响应reactive