在vue中与视图中绑定的数据,其数据的变化会驱动视图的更新,这是因为vue是响应式
那么有没有那么一种情况数据的变化视图没有变化呢?
答案肯定是有的,例如对象的属性变化vue并不能监听到,因此数据的变化并不能驱动视图更新
vue也提供了$set方法来更新对象属性值的变化,但是也会有奇怪的现象比如
<template>
<div class="test">
<div>{{people.male.name}}</div>
<button @click="testData">test</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
people: {
male: {
name: 'man',
hair: 'short',
},
}
}
},
methods: {
testData() {
this.people.male.name = 'dust';
},
},
}
</script>
这样修改,视图会在执行完testData后发生改变,实际上是初始化在data中的数据vue已经全部处理成响应式对象
注意:这里只是在初始化时候的键值对是响应式对象的,下面代码不会改变cloth的视图
<template>
<div class="test">
<div>{{people.male.name}}</div>
<div>{{people.male.cloth || '111'}}</div>
<button @click="testData">test</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
people: {
male: {
name: 'man',
hair: 'short',
},
}
}
},
methods: {
testData() {
this.people.male.name = 'dust';
this.people.male.cloth = 'blue';
},
},
}
</script>
初始化时候显示的是“111”,在执行完testData()之后,name变成了dust,但是cloth仍为“111”,因为新增的属性不是响应式的
有人会说这个时候cloth原本并不存在,这个时候是不会变,那在新增完已经存在的情况下,再次修改cloth的值,会触发视图更新吗?
<script>
export default {
name: 'HelloWorld',
data () {
return {
people: {
male: {
name: 'man',
hair: 'short',
},
}
}
},
methods: {
testData() {
this.people.male.name = 'dust';
this.people.male.cloth = 'blue';
},
testAgain() {
this.people.male.cloth = 'red';
},
},
}
</script>
先执行testData(),这时对象内已经存在了cloth,之后再执行testAgain(),这时视图同样不会发生变化,还是因为此属性并不在响应式监听范围内
那么就用$set()方法即可把其变为响应式的了
this.$set(this.people.man, 'cloth', 'blue');
这时视图会触发更新
综上所述:
data()内初始化数据vue会处理成响应式属性
$set()可以把新增的处理成响应式属性
直接添加新的属性并不能成为响应式属性
数组push等操作可触发更新vue已对此类操作做了特殊处理