Vue 计算属性中 v-for 处理数组时遇到的 Bug 问题
在 Vue 中，计算属性（Computed Properties）是一种非常有用的功能，可以根据依赖项自动更新视图。但是，在使用计算属性时，需要注意一些潜在的 Bug 问题，特别是在处理数组时。下面，我们将介绍一个关于 v-for 处理数组时遇到的 Bug 问题。
问题描述：
在做 Vue 计算属性时，v-for 处理数组时遇到了一个 Bug 问题。问题的主要症状是：在使用 v-for 指令时，计算属性的返回值会无限循环更新，导致组件 render 函数进入无限循环。
问题代码：
```html
<em class="red-ball tac mr5 fl" v-for="(item, index) in ssqRed">{{ item }}</em>
<em class="blue-ball tac mr5 fl" v-for="(item, index) in ssqBlue">{{ item }}</em>
```
```javascript
computed: {
ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}
}
```
问题的原因是 splice 方法会对原数组造成改变，从而导致计算属性的返回值发生变化，引发无限循环更新。
解决方案：
为了解决这个问题，我们可以使用 slice 方法代替 splice 方法，避免对原数组的修改。
```javascript
computed: {
ssqRed: function() {
return this.ssq.bonus_code.slice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.slice(6, 7)
}
}
```
另一种解决方案是使用类名判断，即根据索引值来判断是否展示蓝色的类名。
```html
<em v-for="(item, index) in ssq.bonus_code" :class="['tac','mr5','fl',index>5?'blue-ball':'red-ball']" >{{ item }}</em>
```
这种解决方案可以避免使用计算属性对原数组的修改，并且更加灵活和可维护。
总结：
在使用 Vue 计算属性时，需要注意避免对原数组的修改，特别是在使用 v-for 指令时。使用 slice 方法或类名判断可以解决这个问题，并且提高代码的可维护性和灵活性。
