Vue组合式API：watch与计算属性setter使用及栈溢出报错排查

核心错误原因 #

• 栈溢出（Maximum call stack size exceeded）：reversedHistory的setter中直接赋值reversedHistory.value = value，会触发自身setter方法形成无限递归，最终导致栈溢出。
• 原数组被意外修改：Array.reverse()直接修改原数组，每次调用reversedHistory.value都会反转user.value.history，导致历史数据顺序混乱。
• 响应式变量使用错误：filterHistory中直接用searchText而非searchText.value，无法获取响应式变量当前值；且筛选结果未绑定到响应式变量，无法驱动视图更新。
• Store未初始化：代码中使用store但未调用useStore()获取实例，会导致store未定义错误。

修复后的代码 #

import { watch, computed, ref } from "vue";
import { useStore } from "vuex";

// 初始化store实例
const store = useStore();

const searchText = ref("");
// 存储筛选后的结果，用于绑定表格数据源
const filteredHistory = ref([]);

// 获取用户信息，只读计算属性
const user = computed(() => store.getters["profile/getProfile"]);

// 反转历史记录，返回新数组避免修改原数据
const reversedHistory = computed(() => {
  // 扩展运算符创建数组副本后反转，不改动原history
  return [...user.value.history].reverse();
});

// 筛选逻辑
const filterHistory = () => {
  const keyword = searchText.value.trim();
  if (!keyword) {
    // 搜索为空时显示全部反转后的历史
    filteredHistory.value = reversedHistory.value;
    return;
  }
  // 正确匹配person字段，支持模糊搜索
  filteredHistory.value = reversedHistory.value.filter(item => 
    item.person.includes(keyword)
  );
};

// 监听搜索文本变化，自动触发筛选
watch(searchText, filterHistory);

// 组件初始化时执行一次筛选，确保初始状态显示正确数据
filterHistory();

关键修复点说明 #

• 移除计算属性setter：reversedHistory仅做数据转换，无需修改原数据，用只读计算属性即可。
• 避免修改原数组：用扩展运算符[...array]创建数组副本后反转，防止原user.value.history被意外篡改。
• 响应式变量正确取值：所有ref变量必须通过.value访问值。
• 新增筛选结果变量：filteredHistory存储最终筛选结果，直接绑定到表格数据源即可实现视图更新。
• 初始化筛选：组件加载时执行filterHistory，保证初始状态显示正确内容。

内容的提问来源于stack exchange，提问作者user3118363