今天在做一个vue项目的时候，发现给一个list push 新对象，但是视图不更新
最后上网百度了一下，
发现是因为vue不能监听list的深层的数据的变化。
//比如说，直接的list变化，是可以监听到的，视图也会更新
data() {
return {
data111: []
}
},
......
var a11=[];
data111.push(a11);//vue 可以监听
var b11={
num:10};
data111.a11.push(b11);//vue 不能监听，视图不刷新
为了解决这个问题，我们可以直接用$set来更新数据
//通过 this.$set 就能监听到第二层的数据变化了
this.$set(this.data111.a11, this.data111.a11.length, b11)
如果还不行，我们可以用配合 v-if 强制更新
<div v-if="isTrue">{
{
this.data111.a11}}</div>
.......
aa () {
this.isTrue = false // 强制刷新视图
this.$set(this.data111.a11, this.data111.a11.length, b11)
this.isTrue = true // 强制刷新视图
}
我们也可以使用深度监听的方法来识别数据
----------------------
watch(list, (newVal) => {
console.log('list发生了改变');
}, {
deep: true })
//{ deep: true })就是可以监听到第二层的意思
最后我们还有最后一个傻瓜方法，就是设置一个专门用来页面显示的数据，这样就算再深层的更新也不会有影响
<div v-if="isTrue">{
{
this.dataToSee}}</div>
.........
//比如说，直接的list变化，是可以监听到的，视图也会更新
data() {
return {
dataToSee:[],//专门用来显示
data111: {
a11:[]}
}
},
......
var b11={
num:10};
this.data111.a11.push(b11);//vue 不能监听，视图不刷新
this.dataToSee=this.data111.a11;//dataToSee是会被监听的那个，this.data111.a11每次被赋值它都重新被赋值，就能实现同样的效果