Vue解决data数据改变时，v-for无法实现实时更新dom元素的问题(template中代码的局部刷新)

问题描述

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

<!--element实现折叠文件夹-->
<el-collapse ref="el_collaps_container" v-for="(value,key,index) in json_data" :key="index">
    <!-- 这块引入自定义组件 -->
    <v-fold-file :fold_name="key" :fold_content="value"></v-fold-file>
</el-collapse>

然而，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时销毁。如下所示：

<div class="figure_main" v-if="file_is_show">
<!-- v-for无法实现双向绑定，借助v-if重新渲染组件，实现v-for数据的动态更新 -->
   <!--折叠文件夹-->
   <el-collapse ref="el_collaps_container" v-for="(value,key,index) in json_data" :key="index">
       <!-- 这块引入自定义组件 -->
       <v-fold-file :fold_name="key" :fold_content="value"></v-fold-file>
   </el-collapse>
</div>

监听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
            })
        }
    }
}

搞定！

注意：

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