解决VUE,uniapp触发事件改变数据时,页面没有重新渲染

在很多人写VUE或者uniapp的时候 经常会遇见一种奇怪的现象, 一般出现在我们需要选择购物车中的商品或者修改规格等类似的场景中, 当我们从后台取出一段数据的时候, 某个商品有多个规格, 例如如下的这条模拟数据

[
	{
	name::"苹果",
	size:["大的","小的","红的","绿的"]
	},
	{
	name::"西瓜",
	size:["红的的","黄的的","无籽的","黑美人的"]
	}
]

这条数据如果我们去写一个选择规格什么的, 一定是需要双重遍历的, 而且,在一开始从后台取出数据的时候, 我通常会给拿到的数据再赋值一个属性,例如select_index, 或者select_id 这样的. 如此一来,这个数据就变成了下面这样

[
	{
	name::"苹果",
	size:["大的","小的","红的","绿的"],
	select_index:0
	},
	{
	name::"西瓜",
	size:["红的的","黄的的","无籽的","黑美人的"],
	select_index:0
	}
]

这样的话,我们在页面中显示的话根据我们自己新添加的这个属性就可以很方便的展示出来一个默认值
如图这种情况

当然,当我们触发事件的时候我们完全可以很容易的去修改对应数据的属性

然而问题就出在了这里, 当我们改变数据之后发现,页面上展示的数据并没有改变.

其实解决办法非常简单有意思. 我们可以给页面强制进行刷新, 别想歪,并不是重新onLoad, 而是让页面上的数据强行刷新渲染, 这样的操作就是, 可以给页面需要刷新数据的地方,甚至是最外层的DOM加一个v-if

当然,定义数据的话一定要是true, 不然你页面刚出现就直接隐藏了

然后,当我们触发了改变数据的事件的时候,只需要让这个值等于false然后再等于true, 页面数据就刷新了,原本让人看起来非常摸不着头脑的问题就这么轻而易举的解决了

但是这样的操作方法并不友好 ，虽然肉眼很难看到我们的页面隐藏后再出现这个过程，但是代码就是这样，他确实是实实在在的运行了，
其实我们还可以使用一个方法，this.$set()

用法也是很简单的，比如一个data我们要改变他的某一个属性普遍使用 this,obj.name = ‘张三’，
换一种写法， this.$set(this.obj,‘name’,‘张三’)

这种解决方法是最合适的