如何让Switch/Case仅匹配指定Vuetify断点返回对应limitSize值？

代码触发了switch语句的case穿透特性：你没有在每个case分支结束时添加break关键字，当匹配到对应断点的case后，程序会继续向下执行所有后续case的赋值逻辑，所以无论匹配到xs/sm/md哪个断点，最终都会执行到xl分支的赋值，把limitSize覆盖为3。

方案1：给每个case补全break关键字 #

这是最直接的修复方式，同时新增default分支兜底，避免断点名称异常导致的变量未赋值问题：

pageOfWhatsNews() {
  let limitSize;
  switch (this.$vuetify.breakpoint.name) {
    case "xs":
      limitSize = 1;
      break;
    case "sm":
      limitSize = 1;
      break;
    case "md":
      limitSize = 2;
      break;
    case "lg":
      limitSize = 3;
      break;
    case "xl":
      limitSize = 3;
      break;
    default:
      limitSize = 2;
  }
  const start = (this.currentPage - 1) * limitSize;
  return this.whatsNews.slice(start, start + limitSize);
}

方案2：使用对象映射简化代码（更推荐） #

直接用对象存储断点和展示数量的映射关系，代码更简洁，也能从根源避免case穿透的问题：

pageOfWhatsNews() {
  const breakpointLimit = {
    xs: 1,
    sm: 1,
    md: 2,
    lg: 3,
    xl: 3
  }
  const limitSize = breakpointLimit[this.$vuetify.breakpoint.name] ?? 2
  const start = (this.currentPage - 1) * limitSize;
  return this.whatsNews.slice(start, start + limitSize);
}

内容的提问来源于stack exchange，提问作者M. Straw