js的监听与赋值顺序问题

写这篇是因为工作的时候遇到一个问题请看

一开始的时候 js是这样的

//访问后台拿到数据
getCheckPersonList({
    page: this.page,
    size: this.size,
   }).then(resp => {
    this.list = resp.data.list;
	this.list.forEach(val => {
          val.is_edit = false //先赋值为false 意思是框不显示
    });
});
//改变编辑状态
handleChangeEdit(row){
   row.is_edit = true;
    console.log(row)
},

前端用插槽slot-scope控制

<template slot-scope="scope"  width='200px'>
   <div v-if="!scope.row.is_edit">
   {{scope.row.is_edit}}
       <el-button @click="handleChangeEdit(scope.row)" size="mini">
             <i class="el-icon-edit" ></i>
       </el-button>
   </div>
   <div  v-else="scope.row.is_edit" style="display:inline-block">
       <el-input style="width:50%" :value="scope.row.person_note" ></el-input>				
   </div>
</template>

效果如下

按照上面的代码，一开始scope的is_edit怎么都不会改变，但是在控制台输出row的时候发现里面的数据其实已经改变了，那么就只有一个问题，没有被监听到，找了很久找到一个大佬写的一段话:

顺序有问题，先赋值就是先监听，vue中直接为监听的对象新增一个属性，这个属性是不会被监听的，这时候需要用set处理。所以你这里对象的isEdit属性并没有被监听到，也就不会更新了。你这里不需要使用set，把下面的循环改下就可以了

也就是说，我在后台拿到数据的时候先赋值了，后面再插入一个is_edit的话其实就不会被监听到，所以改了下代码

 getCheckPersonList({
     page: this.page,
     size: this.size,
     }).then(resp => {
        //注意这里几处地方 一个是把赋值跟插入新字段放到一起，这样这个is_edit就会被监听到
        //第二个是把foreach换成了map
        // this.list = resp.data.list;
        this.list = resp.data.list.map(val => {
              val.is_edit = false
              return val
        });
  });

实现效果如下