vue 数组中嵌套的对象添加新属性--页面更新

我们知道vue属于MVVM框架，数据操作视图。对data对象中的数据进行监听，当侦测到数据改变时相应数据所影响的页面也会触发更新。所以我们所需要的这些响应式数据，受到javascript的限制，vue不能检测到对象属性的添加或删除，因为Vue利用的是Object的defineProperty()方法，在初始化实列时将属性转为getter/setter，所以属性必须在data对象上才能让vue转换它。
当然这只是一般的属性，以一般字符串，数字，布尔值这样的基本数据类型作为属性值的响应，当然我们有时候的诉求的初始化属性的属性值不只有这样的基本数据变量，我们还会用到数组，对象这样的引用数据变量。引用数据变量就是对地址的引用，只是对象的指针发生变化，并没有重新生成一个对象，此处省略过多其他介绍，应该这些都比较懂。。。

vue在这种情况下给我们提供了$set这种响应式方法去操作页面更新。其实这只是set简单的对象不是嵌套很深的那种，那如果是那样嵌套比较深的那种我们该怎样去做呢？说多了不如来个业务情景然后撸几行代码看一下：

这样的一个场景我们从后台请求下一个list相当于渲染成一个Table,我们需要赋予每行都有自己独立的编辑功能和显示功能。类似于这样的效果：

<li v-for="(item, index) in list" :key="index"> <span>{{item.name}}</span> <span ref="text" v-show="item.textShow"> {{item.txt}} </span> <input type="text" v-model="item.txt" v-show="!item.textShow"> <button @click="edit(item)" v-show="item.showEditBtn">编辑</button> <button @click="confirm(item)" v-show="!item.showEditBtn">确定</button> </template>

当然看上面的数据机构我们可以看出其实显示隐藏编辑和确定的数据参数并没有给咱们，其实就是我们需要在数组中对象增加一个新属性“showEditBtn”去判定：那有时候我们可能会这样写： 

mounted () {
    this.arr.forEach(item => {
      item.showEditBtn = true

当我们看页面效果居然无动于衷，


只显示确定，应该显示编辑呀！


哈哈！看到上面这种效果，我们应该明白了，showEditBtn属性并不是初始化在data对象里面的，虽然arr属于data对象，但你应该再好好想想js不能监测但对象的变化，当然这时候我们可以考虑如何去侦测，必须让对象变化。

此时我们可以这样改写


 mounted () {
    this.arr.forEach(item => {
      this.$set(item, 'showEditBtn', true)

这样他就可以侦测到你对象中的属性的变化，当然这是一种比较官方的姿势也是一种比较推荐的姿势。

我们考虑一下，对象没有变化我们没有更新页面，单纯的等号赋值只是引用地址的变化，本身不等于数组的变化，那我们让他的数组真正变化（重新创建不就可以了），我们利用Object. assign()去进行浅拷贝对象。


mounted () {
    this.arr.forEach(item => {
      item.showEditBtn = true;
    this.arr = Object.assign({},this.arr)

当然这种方式我们可以现效果，但我们不如用第一种，第一种只是单纯去改变一个数组中嵌套的对象的属性而已，而第二种方法直接浅拷贝的一个数组对象。

当然，第二种有没有变通之法，当然有！我们考虑一下，如果之前的功能只是单纯的去渲染一个list,


arr: [
          name: '第1行'
          name: '第2行'
          name: '第3行'
          name: '第4行'

没有编辑功能，编辑功能是后来加的，并且遇见的后台比较懒，它就维持这个数据结构不变，那我们是不是有想法了，这样就启迪了第二种方式的变通，

我们不忙着将获取到的list赋值给arr，我们对他进行改写：


mounted () {
    list.forEach(item => {
      item.textShow = true;
      item.text = ' ';
      item.showEditBtn = true;
    this.arr = list
// 同时我们将改写好的arr放在
 <ul v-if="arr">
 <li v-for="(item, index) in arr" :key="index">

通过上面的方法我们可以提前预判我们需要怎样的数据去驱动视图，然后我们最先将它初始化在data对象中，这就需要写代码钱我们有个思考全面的过程。

当然如果想第一种设想我们只是单纯的去隐藏编辑和确定功能，我们可不可以将在data里去声明一个单纯的全局变量，不去嵌在数组和对象那种很隐秘的角落，我想正大光明的成为一个data对象中单独的控制变量currentShow。我们可以分析一下：

因为在写遍历列表的时候我们通过v-for循环去写，所以我们如果去控制相同功能元素的显示隐藏，我们引用全局变量currentShow，当我们触发某个行为去改变currentShow的值时，我们会发现所有的item都会相应的变化，虽然你操作的是其中一个：


会是这样的效果


当然我们想想因为我们全局的currentShow变量是完全变化一致的，我们要想单独去操作每行元素，我们该怎样去做？其实也很简单，我们再加个判断，同时满足这两个结果才会触发行为，这个判断必须是每行独一无二的，哈哈！肯定是index索引了，我们可以再声明一个data对象属性currentIndex，当我们对每行进行操作时，我们将this.currentIndex等于这行的索引，我们增加的判断就可以变成


v-show="currentIndex === index && currentShow"

每行变化时currentIndex都在变化，他只能等于操作行的索引，感觉有一种借力打力的效果。不过实现了