vue 数据改变，视图却不更新

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

举个例子：

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

上代码：

CSS:
    .itemIsSelected{
        background:red;
    }

HTML:

    <tr v-for="(item,index) in listData" @click="lineClick(item)" :class='{itemIsSelected:item.isSelected}'>
        <td>{{item.a}}</td>
        <td>{{item.a}}</td>
        <td>{{item.a}}</td>
        <td>{{item.a}}</td>                    
    </tr>

JavaScript:

new Vue({
    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 ！！！