原因
 
vue框架对数据设置的监控器导致数组后面会出现 Observer,观察者模式，它不可枚举，从中不可xx[0]取值
 
解决方案
 
通过一次深拷贝重新生成一个可枚举的数组
 JSON.parse(JSON.stringify(store.getters.menuList))

前景
 
vue2.+
 工作中我们经常需要修改某个数组里的某个属性并且希望视图数据刷新，但是vue2中如果直接通过下标修改数组属性值或新增属性则不会响应，如:
 
data() {
    return {
        arr: [
            {
                a: 0
            }
        ]
    }
}
 
此时如果直接这样arr[0] = {a: 999, b: 'bbb'}进行修改，视图不会改变。vue官方提供了$set、$forceUpdate来解决这些问题。
 
解决
 
假设有这么一个场景：for循环一个后端返回的数组arr显示成一个列表，每行新增一个isShow属性，列表每行有个按钮，点击每行中的按钮arr中相应行/下标的isShow布尔值进行切换。
 
data() {
    return {
        arr: []
    }
}
 
<span v-for="(item, index) in arr" :key="index">
    {{item.a}}{{item.isShow}}
    <span @click="click(item)">点击</span>
</span>
 
methods: {
    async fetch() {
        // ..await
        this.arr = [{a: 0}...] // ..
    },
    click(item){
     item.isShow = !item.isShow
    }
}
 
知道前景后的我们可以直接在修改isShow的值后面添加this.$forceUpdate()，或者在设置isShow初始值时使用set:
 
click(item) {
    item.isShow = !item.isShow
    this.$forceUpdate()
}
 
this.arr.forEach((item, index) => {
    this.$set(this.arr[index], 'isShow', true)
})
 
尝试
 
使用forEach如下直接修改发现也可以使视图刷新:
 
this.arr.forEach(item => {
    item.a = 999
    item.isShow = true
})
 
但是这样处理仅初次渲染时变化，点击按钮click方法：
 
click(item) {
    item.isShow = !item.isShow
}
 
后，视图上新增属性isShow的值并不会变化，需要视图更新则要加this.$forceUpdate()。
 
使用map如下修改可以使视图更新，并且后期修改新增属性isShow也会更新:
 
this.arr = this.arr.map(item => ({
    ...item,
    a: 90,
    isShow: true
}))
 
以上修改属性不更新视图原因是vue对新增的属性没有做响应监听。但为什么forEach不行，map可以？forEach是修改原数组，在以上用法中，通过循环数组，给数组的每一项添加一个a和isShow属性值，实际上等同于arr[0].isShow = true这样设置，这样设置的属性没有新增到vue的响应机制；map在以上用法中不修改原数组，而是返回一个新数组，也就是等同于this.arr = 新数组这样设置，相当于直接改变了data的根属性。
 
延伸
 
在上述使用forEach修改数组的时候，如果过程是：
 
this.arr.forEach(item => {
    item.a = 999
    item.isShow = true
})
 
click(item) {
    item.a = 0
    item.isShow = !item.isShow
}
 
那么新增属性isShow也会改变，也就是原有属性值发生改变，新增属性才会改变。但仍有弊端，虽然视图上isShow值是实时改变了，但与之绑定的其他属性视图却不会刷新。
 
总结就是，不要使用循环去修改对象数组里的属性值，也不要直接更改对象数组里的对象。
 
 
vue3
 同样的代码使用vue3就没有新增对象属性不生效的情况。vue3已经重写了双向绑定相关逻辑。
 
 
map
 常规使用map不会修改原数组，但是map也一个对数组循环处理的方法，如下使用：
 
 
this.arr.map(item => {
    item.a = 999
    item.isShow = true
})
 
这样会修改原数组，但是这样使用毫无意义。

使用forEach判断 返回true或者false的时候 在computed中无效
 
解决方式 使用for
 
 for(let i=0;i<this.FQimgList.length;i++){
             if(this.FQimgList[i].tag === val){
               return true
             }else{
               return false
             }
           }

发现vue.js 再使用forEach时，break或return无法跳出循环。经过查阅资料，发现两种方法可以跳出循环，在此记录
 
方法一：使用try{...}catch(e){...}
 
try{
 
        var array = ["a1","b2","c3","d4"]
 
        //forEach遍历数组
 
        array.forEach(function(item){
 
                if(item === "b2"){
 
                        throw new Error("false")
 
                }
 
        })
 
}catch(e){
 
        if(e.message == 'false'){
 
                return
 
        }
 
}
 
 
方法二：使用arr.some()或者arr.every()替代
 
some()当内部return true时跳出整个循环：
 
var arr = [10,20,30,40];
 
var num = 20;
 
arr.some(function(v){
 
　　if(v == num) {
 
    return true;
 
　　}
 
});
 
 
every()当内部return false时跳出整个循环
 
var arr = [10,20,30,40];
 
var num = 20;
 
arr.every(function(v){
 
    if(v == num) {
 
        return false;
 
    }else{
 
        return true;
 
    }
 
});