vue关于数据更新后视图不渲染的原因

项目场景：

在开发关于数据是否展示和隐藏功能时

问题描述：

在判断每条数据是否需要展示或者收起的时候，更新了对应的判断条件，但是页面上一直都不起作用，就是页面不渲染了

vue代码

<view v-for="(item,i) in data_list" class="rp-content-items">
	<view class="rs-item-text-k">{{item.key}}:</view>
	<span :class="showTotal[i] ? 'rs-item-text-v-detail' : 'rs-item-text-v-brief' ">{{item.value}}</span>
	<view class="re-item-fold">
		<view class="re-item-fold-bt" @click="onFold(i)" >
			{{showTotal[i] ? '收起' : '展开'}}
		</view>
	</view>
</view>

js代码

onFold(index){
	if(this.showTotal[index]){
		this.showTotal[index] = false				
	}else{
		this.showTotal[index] = true				
	}
}

---

原因分析：

刚开始以为showTotal(i)参数修改失败，即onFold函数不起作用，后面打印日志发现，确实是修改成功了。在看看是否vue的判断条件不起作用，后面初始化不同showTotal值的时候发现是起作用的。如上图。打开debugger发现showTotal的值也是修改成功，就是没有渲染到页面上，所以可以判断是由于数据更新后，页面还来不及更新！

解决方案：

后面在网上查找资料，有大神说，才知道是数据层次太多，没有触发render函数进行自动更新！
只有使用这条语句 this.$forceUpdate() 就好了， 如下

onFold(index){
	if(this.showTotal[index]){
		this.showTotal[index] = false				
	}else{
		this.showTotal[index] = true				
	}
	this.$forceUpdate()
}