在Vue中使用slice却更改了原始数组

Question

我使用slice返回了一个新的数组，对新的数组中进行操作后，原数组也跟着改变了。

import {serie_map} from './components/DataMap.js'

export default {
    data(){
        return {
            allData: [],
            pageData: [],
            pageSize: 5,
        }
    },
    methods:{
        ...,
        pageChange(val){
            this.pageData = this.allData.slice(val*this.pageSize, (val+1)*this.pageSize)
            this.pageData = this.pageData.map((elem)=>{
                elem[1] = serie_map[elem[1]]
                return elem
            })
        }    
    }
}

我查阅了很多教程，确定slice方法是不会更改原数组的，我在console中尝试复现这段代码没有遇到问题。但是也没有人提到在Vue中这样更改数组，会有什么问题。

我的代码中其他部分没有对allData进行过其他操作。

效果如下：
allData中0号位置的元素的1号位置被改成了serie_map对应的翻译，但是它应该是和的5号位置元素一样未经转换的。如果这个时候切换到下一页，触发pageChange函数后，5号位置的元素也被转换了。

Answer 1

slice虽然没有修改allData，但是allData里面的子数组是引用类型啊，关联没有切断肯定会影响的

pageChange(val) {
  this.pageData = this.allData.slice(val * this.pageSize, (val + 1) * this.pageSize).map((v) => {
    const elem = [...v];
    elem[1] = serie_map[elem[1]];
    return elem;
  });
},