在Vue中，你可能经常遇到这个问题，数据明明已经变化，但是相应的视图却没有更新。

举个例子：

一个10行的列表，选中一行，该行的背景色变化。

上代码：

CSS:

.itemIsSelected{

background:red;

}

HTML:

{{item.a}}{{item.a}}{{item.a}}{{item.a}}

JavaScript:newVue({

el:"#app",

data:{

listData:[]

},

mounted:function(){this.getList()

},

methods:{

lineClick(item){

console.log(item)

item.isSelected=item.isSelected;

console.log(item)

},

getList(){

axios().then(res=>{this.listData =res.list;

})

}

}

})

欣喜一回，终于写完了，尝试一波，点击一行，控制台输出对应的 item 的对象

这个时候你却发现，该行的背景色并没有随之改变。

再次点击当前行，控制台又输出对应 item的对象

检查数据，第一次输出的 item 的 isSelected 确实是 true ，第二次输出的 item 的 isSelected 确实是 false，

但是，视图就是没有更新

这时候，不难发现一个问题，两次输出的 item 对象，有一个共同点

item 的 isSelected 属性在控制台直接是可见的，而其他对象需要手动点击一次，才可以看到

并且，item 的其他属性，有对应的 getter 和 setter 方法， 而 isSelected 属性没有

问题定位到了，如何解决。

问题是：vue 中，是通过数据的 getter 和setter 来做相应的视图更新，该例子中 isSelected 没有对应的  getter 和setter

通常我的做法是，在数据请求回来的时候，在数据给到 vue 的data 之前，给数据手动增加 isSelected 为false。

即 在 this.listData = res.list 之前 (一定要在数据给到 vue 实例 之前 之前 之前)

做如下操作：

res.list.forEach((item) =>{

item.isSelected= false;

})

再次尝试 ok ！！！