【vue】使用computed时ts报错：Unexpected side effect in computed function.

1. 报错： Unexpected side effect in computed function.

这句话的意思是在计算函数中发生了意外的副作用。
就是在使用computed时，改变了其他的参数值，会影响其他使用该参数的地方。
报错写法：

const GeoItem = [
  {
    label: '地理位置字段',
    optionType: 'Geo',
  },
  {
    label: '源位置',
    optionType: 'Geo',
  },
  {
    label: '国家字段',
    optionType: 'String',
  },
  {
    label: '省字段',
    optionType: 'String',
  },
  {
    label: '市字段',
    optionType: 'String',
  },
];

const computedGeoItem = computed(() => {
  switch (selectChart.value?.key) {
    case 'AreaMap':
      return splice(2, 5);// 这边出现 Unexpected side effect in computed function.
    case 'ScatterMap':
      return [GeoItem[0], ...GeoItem.slice(2, 5)];
    case 'AttackMap':
      return GeoItem.slice(1);
  }
  return [];
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2. 解决方法

方法1：使用不改变原数组的方法去截取数组元素，改成slice方法
方法2：对拷贝后的数据进行操作
深拷贝：JSON.parse(JSON.stringify(obj))，lodash的 _.cloneDeep(obj)
浅拷贝: ...扩展运算符、Object.assign()

3. 什么是函数副作用？

函数副作用是指函数在执行过程中对外部环境产生的影响。
一般包括以下几个方面：
修改全局变量：函数在执行过程中修改了全局变量的值，会对程序的其他部分产生影响。
修改函数参数：函数在执行过程中修改了函数的参数，会对调用函数的部分产生影响。
修改内部对象：函数在执行过程中修改了内部对象的值，会对后续对这个对象的访问产生影响。
输入/输出操作：函数在执行过程中产生了输入/输出操作，会对外部环境产生影响。