问题描述

利用Vue做项目过程中，经常使用v-for渲染多个重复组件或dom元素，比如：传递json/字典，利用v-for遍历json中的key和value，并渲染到页面中，改变元素的顺序，如下所示：

 <el-card class="content-card" v-for="(questionsData,i) in form.questionsData">
 //具体的业务
 ......
 </el-card>

然而，v-for在设计过程中，无法实现对数据的双向绑定，也就是说，当json_data中的key或value改变时，默认data中的json_data属性值可以改变，但是页面内容还是之前组件第一次渲染出来的结果，无法实现实时刷新。

解决方案

Vue中，v-if是条件渲染，每次状态更新都会重新删除或者创建元素，因此利用v-if可以实现template中代码的局部刷新(先删除，再创建)，但v-if有较高的切换性能消耗。

Vue官方中不推荐v-for和v-if在同一标签中共同使用。因此，给上述示例代码外面加上一层div，file_is_show为true时创建，为false时销毁。如下所示：

<template v-if="file_is_show">
	 <el-card class="content-card" v-for="(questionsData,i) in form.questionsData">
	 //具体的业务
	 ......
	 </el-card>
</template>

监听json_data数据改变，若json_data改变，元素先销毁，再创建，实现页面的局部刷新。

方法一

watch: {
    // 监听json数据变化，重新渲染文件夹内容
    json_data(newVal) {
        this.file_is_show = false
        if (true) {
            this.$nextTick(()=>{ // $nextTick 是在 DOM 更新循环结束之后执行延迟回调
                this.file_is_show = true
            })
        }
    }
}

方法二

//下移 将当前数组index索引与后面一个元素互换位置，向数组后面移动一位
 zIndexDown(arr, row) {
   let index = arr.indexOf(row);
   if (index + 1 != arr.length) {
     this.swapArray(arr, index, index + 1);
   } else {
     this.$modal.msgWarning("已是最后，无法下移");
   }
 },
 //上移 将当前数组index索引与前面一个元素互换位置，向数组前面移动一位
 zIndexUp(arr, row) {
   let index = arr.indexOf(row);
   if (index != 0) {
     this.swapArray(arr, index, index - 1);
   } else {
     this.$modal.msgWarning("已是第一个，无法上移");
   }
 },
 /**
  * 数组元素交换位置
  * @param {array} arr 数组
  * @param {number} index1 添加项目的位置
  * @param {number} index2 删除项目的位置
  * index1和index2分别是两个数组的索引值，即是两个要交换元素位置的索引值，如1，5就是数组中下标为1和5的两个元素交换位置
  */
 swapArray(arr, index1, index2) {
   arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        this.file_is_show = false
        if (true) {
          this.$nextTick(()=>{ // $nextTick 是在 DOM 更新循环结束之后执行延迟回调
              this.file_is_show = true
          })
        }
      }

注意

1. this.$nextTick是在DOM更新之后才会调用里面的内容。
2. 如果不加这句话，json_data 改变，file_is_show先false，然后马上更新为true。而原本file_is_show就是true，所以DOM不会实现刷新。
3. nextTick的使用可以在dom销毁之后再执行回调函数（创建功能），这样才能达到销毁->创建，达到局部更新的功能。