一份实用的Vue3技术栈代码评审指南

前端加油站2025-11-08 8:02

CSS

优先使用 **scoped**

防止样式污染全局，每个组件样式必须局部化。

错误示例：无作用域

vue 复制代码 
<style>
.button {
  color: red;
}
</style>

不加 scoped 会影响全局所有 .button

正确示例：使用 scoped

vue 复制代码 
<style scoped>
.button {
  color: red;
}
</style>

限制嵌套层级 ≤ 3 层

嵌套超过 3 层说明选择器设计有问题，建议拆分样式或使用 BEM。

错误示例：嵌套过深（5 层）

scss 复制代码 
.card {
  .header {
    .title {
      .icon {
        span {
          color: red;
        }
      }
    }
  }
}

正确方式是进行合理拆分

避免使用 !important

!important 会带来样式权重混乱，除非必要不推荐使用 !important

错误示例

css 复制代码 
.button {
  color: red !important;
}

.alert {
  display: none !important;
}

正确示例：提升选择器权重

css 复制代码 
/* 通过增加父级选择器权重覆盖 */
.container .button {
  color: red;
}

合理使用 v-deep

在 Vue3 中，如果要覆盖子组件或第三方库的内部样式 ，必须使用 ::v-deep。禁止使用老版的 /deep/ 或 >>>，因为它们已废弃。同时要避免滥用 ::v-deep，只在必要时使用，并保持选择器短小。

错误示例

vue 复制代码 
<style scoped>
.child-component .btn {
  color: red;
}
</style>

正确示例

vue 复制代码 
<style scoped>
::v-deep(.btn) {
  color: red;
}
</style>

优先使用 UnoCSS

因为项目中引入 UnoCSS，首选使用 UnoCSS。

错误示例

使用了传统的 CSS 类名来定义样式，而不是利用 UnoCSS 的原子化类。这违背了优先使用 UnoCSS 的原则。

vue 复制代码 
<template>
  <div class="my-button">
    点击我
  </div>
</template>

<style scoped>
.my-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
</style>

正确示例

充分利用了 UnoCSS 的原子化类来定义相同的样式

vue 复制代码 
<template>
  <div class="bg-blue-500 text-white p-x-5 p-y-2 rounded-md cursor-pointer">
    点击我
  </div>
</template>

<style scoped>
/* 无需额外的 style 标签，因为样式已通过 UnoCSS 类名定义 */
</style>

JavaScript

变量与方法应采用统一的命名规范

命名应遵循语义清晰、风格一致、可读性高的原则，变量名体现数据类型/用途，方法名体现行为。团队建议统一小驼峰（camelCase） 风格，并避免无意义缩写或混用语言。

错误示例：变量命名不语义化

typescript 复制代码 
let a = true;
let b = [];
let c = "http://api.example.com";

正确示例如下

  1. 语义化命名

    ts 复制代码 
    let isActive = true;
let userList: User[ ] = [ ];
const API_BASE_URL = "http://api.example.com";

  2. 方法名包含动词

    ts 复制代码 
    function fetchData() { ... }
function saveUser() { ... }
function deleteUser() { ... }

  3. 布尔值变量以 is/has 开头

ts 复制代码 
const isVisible = false;
const hasError = true;

> 1. 布尔值遵循语法准确是前提 2 推荐用 has 开头

dev.to/michi/tips-... 参考写布尔值的工具

使用可选链

当访问对象的深层次属性时，如果中间某一级可能为 null 或 undefined， (?.) 替代传统的逐层判断，代码更简洁且避免运行时异常。

错误示例

typescript 复制代码 
if (
  response &&
  response.data &&
  response.data.user &&
  response.data.user.profile
) {
  console.log(response.data.user.profile.name);
}

上面的代码示例中判断条件冗长且可读性差、容易漏掉某一级判断和难以维护

正确示例

typescript 复制代码 
const name = response?.data?.user?.profile?.name;
if (name) {
  console.log(name);
}

函数参数超过 3 个应封装成对象

当函数参数 超过 3 个 或存在多个相同类型的参数时，推荐将这些参数封装为一个对象。这样可以提升代码可读性、维护性，并支持命名参数调用，避免顺序错误。

错误示例：多个参数直接传递

typescript 复制代码 
function createUser(
  name: string,
  age: number,
  role: string,
  isActive: boolean,
  department: string
) {
  // 创建用户逻辑
}

createUser("Alice", 28, "admin", true, "Engineering");

正确示例

typescript 复制代码 
interface CreateUserOptions {
  name: string;
  age: number;
  role: string;
  isActive?: boolean;
  department?: string;
}

function createUser(options: CreateUserOptions) {
  const { name, age, role, isActive = true, department = "General" } = options;
  // 创建用户逻辑
}

createUser({
  name: "Alice",
  age: 28,
  role: "admin",
  department: "Engineering",
});

使用 ResizeObserver 替代 onResize

window.onresize 只能监听浏览器窗口尺寸变化，无法感知单个 DOM 元素尺寸变化。Vue3 项目应使用 ResizeObserver 监听任意 DOM 元素的尺寸变化，支持多元素、精准触发、性能更优。

错误示例

vue 复制代码 
<script setup lang="ts">
const width = ref(0);

onMounted(() => {
  window.onresize = () => {
    const el = document.getElementById("container");
    width.value = el?.offsetWidth || 0;
  };
  window.onresize(); // 初始化
});
</script>

<template>
  <div id="container" style="width: 50%;">宽度：{{ width }}px</div>
</template>

问题

  • 无法感知父容器/内容变化，只能在窗口尺寸变化时触发。

  • 多组件绑定 window.onresize 时，回调容易互相覆盖。

  • 卸载时忘记移除监听，可能导致内存泄漏。

正确示例

vue 复制代码 
<script setup lang="ts">
const elRef = ref<HTMLDivElement>();
const size = ref({ width: 0, height: 0 });

onMounted(() => {
  const observer = new ResizeObserver((entries) => {
    const rect = entries[0].contentRect;
    size.value.width = rect.width;
    size.value.height = rect.height;
  });
  observer.observe(elRef.value!);

  onUnmounted(() => observer.disconnect());
});
</script>

<template>
  <div ref="elRef" style="width: 50%;">
    宽度：{{ size.width }}px，高度：{{ size.height }}px
  </div>
</template>

TypeScript

避免在组件/逻辑中使用 any

在 Vite + TS 项目里，一旦滥用 any，类型检查形同虚设。要尽量用明确类型或 unknown（再做类型收窄）。

错误示例

typescript 复制代码 
function parseData(data: any) {
  return JSON.parse(data);
}

const user: any = getUser();
console.log(user.name);

正确示例

typescript 复制代码 
function parseData(data: unknown): Record<string, unknown> {
  if (typeof data === "string") {
    return JSON.parse(data);
  }
  throw new Error("Invalid data type");
}

interface User {
  name: string;
  age: number;
}
const user: User = getUser();
console.log(user.name);

目前有两种情况，

  1. stores 中没有写类型 （旧的不补类型，新的 stores 补类型） 新接口，新枚举，新常量

使用 enum 避免硬编码

所有固定集合值（角色、状态、方向等）必须使用 TypeScript 的 enum 定义，禁止使用字符串字面量或硬编码。

错误示例：硬编码字符串

typescript 复制代码 
if (user.role === 'admin') { ... }
if (status === 'PENDING') { ... }

正确示例：使用 enum

typescript 复制代码 
enum UserRole {
  Admin = 'admin',
  User = 'user',
  Guest = 'guest'
}

enum OrderStatus {
  Pending = 'PENDING',
  Shipped = 'SHIPPED',
  Delivered = 'DELIVERED'
}

if (user.role === UserRole.Admin) { ... }
if (status === OrderStatus.Pending) { ... }

Props、Emits 必须类型化

在 Vue3 的 SFC 中，defineProps 和 defineEmits 必须声明类型。

错误示例

tsx 复制代码 
defineProps(['title', 'count'])
defineEmits(['update'])

正确示例

typescript 复制代码 
interface Props {
  title: string
  count: number
}

interface Emits {
  (e: 'update', value: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

3.3 以上有另一种方式

泛型必须具备边界约束

使用泛型时必须加上约束，防止过宽的类型导致不安全操作。

错误示例

typescript 复制代码 
function getValue<T>(obj: T, key: string) {
  return obj[key]
}

正确示例

typescript 复制代码 
function getValue<T extends object, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}

组合式 API 必须有返回值类型

composables API 应该明确返回值类型，方便调用处类型推断。

错误示例

typescript 复制代码 
export function useUser() {
  const user = ref<User>()
  return { user }
}

正确示例

typescript 复制代码 
export function useUser(): { user: Ref<User> } {
  const user = ref<User>()
  return { user }
}

Vue3

不要在 defineProps() 里混用类型和 runtime 校验

Vue3 允许 defineProps() 使用 runtime 声明和类型声明，但二者混用易出 bug。推荐统一使用 泛型声明类型。

错误示例

vue 复制代码 
<script setup lang="ts">
defineProps({
  title: String,
});
interface Props {
  title: string;
}
</script>

正确示例

vue 复制代码 
<script setup lang="ts">
interface Props {
  title: string;
}
const props = defineProps<Props>();
</script>

类型声明统一放在 types 文件夹或模块中

全局类型或接口建议集中管理，避免散落在组件里难以维护。

错误示例

vue 复制代码 
// 在多个组件里重复定义 interface User { name: string; age: number }

正确示例

pgsql 复制代码 
src/types/user.d.ts
vue 复制代码 
export interface User { name: string age: number }

在模板中使用类型提示

通过 defineExpose 和 defineEmits 的泛型参数在模板中获得类型提示。

错误示例

vue 复制代码 
<template>
  <button @click="emit('save', 123)">Save</button>
</template>

<script setup lang="ts">
const emit = defineEmits(["save"]);
</script>

正确示例

vue 复制代码 
<script setup lang="ts">
const emit = defineEmits<{
  (e: "save", id: number): void;
}>();
</script>

优先使用 <script setup> 而不是 defineComponent

Vue 3 的 <script setup> 更简洁、性能更好（编译优化），避免不必要的模板变量暴露。

错误示例

vue 复制代码 
<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const count = ref(0);
    return { count };
  },
});
</script>

正确示例

vue 复制代码 
<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

在模板中避免复杂逻辑表达式

模板里只做展示，不要做复杂逻辑，逻辑应移到计算属性或方法。

错误示例

markdown 复制代码 
<template>
  <div>
    {{
      users
        .filter((u) => u.age > 18)
        .map((u) => u.name)
        .join(", ")
    }}
  </div>
</template>

正确示例

markdown 复制代码 
<script setup lang="ts">
const adultNames = computed(() =>
  users.value
    .filter((u) => u.age > 18)
    .map((u) => u.name)
    .join(", ")
);
</script>

<template>
  <div>{{ adultNames }}</div>
</template>

事件名统一使用 kebab-case

Vue 3 推荐自定义事件名用 kebab-case，避免与 DOM 属性冲突。

错误示例

vue 复制代码 
<ChildComponent @saveData="handleSave" />

正确示例

vue 复制代码 
<ChildComponent @save-data="handleSave" />

组件通信避免滥用 $emit，优先使用 props + v-model

小型数据通信用 props/v-model，大型数据或频繁通信建议使用 Pinia/Composable。

错误示例

vue 复制代码 
<ChildComponent @updateValue="parentValue = $event" />

正确示例

vue 复制代码 
<ChildComponent v-model="parentValue" />

避免复杂嵌套三元运算

三元表达式适合简单条件切换，若逻辑复杂或嵌套，应使用 if-else、computed 或方法代替。 在模板中，复杂三元表达式严重降低可读性，且容易遗漏分支，Review 时应强制重构

错误示例

vue 复制代码 
<template>
  <div>
    {{ status === "loading" ? "加载中" : status === "error" ? "错误" : "完成" }}
  </div>
</template>

正确示例

vue 复制代码 
<script setup lang="ts">
const statusText = computed(() => {
  if (status.value === "loading") return "加载中";
  if (status.value === "error") return "错误";
  return "完成";
});
</script>

<template>
  <div>{{ statusText }}</div>
</template>

定时器必须在卸载时清理

在 Vue 组件中使用 setInterval、setTimeout、requestAnimationFrame 等定时器，必须在组件卸载（onUnmounted）时清理，否则会导致内存泄漏或意外触发逻辑

错误示例

vue 复制代码 
<script setup lang="ts">
onMounted(() => {
  setInterval(() => {
    console.log("轮询接口");
  }, 1000);
});
</script>

正确示例

vue 复制代码 
<script setup lang="ts">
let timer: ReturnType<typeof setInterval>;

onMounted(() => {
  timer = setInterval(() => {
    console.log("轮询接口");
  }, 1000);
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

IO（API 请求、文件处理等）必须做错误处理

网络请求（fetch/axios）、文件操作等 IO 行为容易失败，必须捕获异常并反馈用户，防止应用无响应或白屏

错误示例

tsx 复制代码 
const fetchData = async () => {
  const res = await fetch("/api/data");
  const data = await res.json();
  console.log(data);
};

正确示例

tsx 复制代码 
const fetchData = async () => {
  try {
    const res = await fetch("/api/data");
    if (!res.ok) throw new Error("请求失败");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("数据请求错误:", err);
    alert("网络错误，请稍后重试");
  }
};

避免数据竞态（Race Condition）

当组件内多次发起异步请求或副作用操作（如用户快速切换选项），后发出的请求可能比先发出的请求先返回，导致数据状态错乱。必须通过请求标记、AbortController 或最新响应检查防止。

错误示例 具体场景：用户快速切换 Item 1 → Item 2 → Item 1，可能 Item 1 的旧请求最后返回，把数据覆盖成错误值。

markdown 复制代码 
<script setup lang="ts">
const selectedId = ref(1);
const data = ref(null);

watch(selectedId, async (id) => {
  const res = await fetch(`/api/item/${id}`);
  data.value = await res.json();
});
</script>

<template>
  <select v-model="selectedId">
    <option :value="1">Item 1</option>
    <option :value="2">Item 2</option>
  </select>
  <div>{{ data }}</div>
</template>

解决思路

正确示例 1：使用请求标记（Token）

vue 复制代码 
<script setup lang="ts">
const selectedId = ref(1);
const data = ref(null);
let requestToken = 0;

watch(selectedId, async (id) => {
  const token = ++requestToken;
  const res = await fetch(`/api/item/${id}`);
  if (token !== requestToken) return; // 旧请求，丢弃
  data.value = await res.json();
});
</script>

正确示例 2：使用 AbortController

vue 复制代码 
<script setup lang="ts">
const selectedId = ref(1);
const data = ref(null);
let controller: AbortController;

watch(selectedId, async (id) => {
  controller?.abort(); // 中断上一个请求
  controller = new AbortController();

  try {
    const res = await fetch(`/api/item/${id}`, { signal: controller.signal });
    data.value = await res.json();
  } catch (err) {
    if (err.name !== "AbortError") console.error(err);
  }
});
</script>

正确示例 3：封装 Composable，统一竞态处理

tsx 复制代码 
// composables/useSafeFetch.ts
export function useSafeFetch() {
  let controller: AbortController;

  return async function safeFetch(url: string) {
    controller?.abort();
    controller = new AbortController();
    const res = await fetch(url, { signal: controller.signal });
    return res.json();
  };
}
tsx 复制代码 
<script setup lang="ts">
const { safeFetch } = useSafeFetch();
const data = ref(null);

watch(selectedId, async (id) => {
  data.value = await safeFetch(`/api/item/${id}`);
});
</script>

列表渲染中不推荐使用索引作为 key

Vue 的虚拟 DOM 需要依赖 key 来准确地跟踪节点身份，保证列表渲染的高效与正确。**key** 必须唯一且稳定 ，通常来自数据的唯一标识字段（如数据库 ID）。避免使用数组索引 **index** 作为 **key**，除非数据列表静态且无增删排序需求。

错误示例：使用索引作为 key

vue 复制代码 
<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </li>
  </ul>
</template>

正确示例：使用稳定唯一标识作为 key

vue 复制代码 
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

国际化

  1. 代码中的文案一定要做国际化处理 （比如中文正则表达式搜索检查）

  2. 国际化后的文案由 PM 提供，PM 不提供，使用 ChatGPT/Cursor 处理后与 PM 一起校对（拿不准找 Perry ）

  3. 标点符号与语言对应，比如英文中不能出现中文括号

  4. 新增的国际化内容设置独立命令空间或者全文检索，避免 key 冲突

  5. 国际化内容的 key 是英文短语，不能是中文

  6. PR 的 Code Review 中涉及国际化内容必须重点 review

正确示例

typescript 复制代码 
export default {
	'Administrator has enabled Multi-Factor Authentication (MFA)': 'El administrador ha habilitado la autenticación de múltiples factores (MFA)',
  'Open your app store': 'Abre tu tienda de aplicaciones',
};

在组件中这样使用

vue 复制代码 
<li>{{ t('Open your app store') }}</li>

Vue 组件设计

统一组件命名 / 文件命名策略

统一组件名采用 PascalCase（或一致 kebab-case），基础组件保留 Base 前缀，名称应全拼避免缩写，提高可维护性

错误示例

powershell 复制代码 
components/
  myComp.vue
  btn.vue

正确示例

shell 复制代码 
components/
  MyComponent.vue
  BaseButton.vue

在组件中这样使用

vue 复制代码 
<BaseButton/>

如果是 element-plus 组件库，可以使用如下的使用方式

vue 复制代码 
<el-button/>

统一文件夹（目录）命名规范

项目中的所有目录名称必须遵循统一的命名风格，确保路径清晰、可预测、跨平台无大小写冲突。

错误示例：目录命名混乱

shell 复制代码 
components/
  UserProfile/
  loginForm/
  Account_details/
  auth/

正确示例：统一 kebab-case

shell 复制代码 
components/
  user-profile/
  login-form/
  account-details/
  auth/

TS 文件名命名

项目中的 TS 文件命名应该是小驼峰格式

错误示例

shell 复制代码 
user-list.ts

正确示例

shell 复制代码 
userList.ts

组件的状态与 UI 分离

在 Vue3 组件开发中，所有数据处理逻辑（如 API 请求、数据格式化、状态管理等）应从 UI 层（模板 & 样式）中分离，放入 Composable、Store、Utils。模板只负责展示，逻辑放在单独模块便于测试、复用和维护。

错误示例

vue 复制代码 
<script setup lang="ts">
import { ref, onMounted } from "vue";

const users = ref([]);
const loading = ref(false);
const error = ref("");

onMounted(async () => {
  loading.value = true;
  try {
    const res = await fetch("/api/users");
    users.value = await res.json();
  } catch (e) {
    error.value = "加载用户失败";
  } finally {
    loading.value = false;
  }
});

const formatName = (user) => `${user.firstName} ${user.lastName}`;
</script>

<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error">{{ error }}</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">
      {{ formatName(user) }}
    </li>
  </ul>
</template>

上面的示例中存在的问题

  • API 请求逻辑、数据状态和格式化函数都在组件里

  • 组件职责太多：UI + 业务逻辑 + 状态管理

  • 无法复用 fetchUsers 和 formatName

正确示例 - 数据逻辑分离到 Composable

composables/useUsers.ts

vue 复制代码 
import { ref } from "vue";

export function useUsers() {
  const users = ref([]);
  const loading = ref(false);
  const error = ref("");

  const fetchUsers = async () => {
    loading.value = true;
    try {
      const res = await fetch("/api/users");
      users.value = await res.json();
    } catch (e) {
      error.value = "加载用户失败";
    } finally {
      loading.value = false;
    }
  };

  const formatName = (user) => `${user.firstName} ${user.lastName}`;

  return { users, loading, error, fetchUsers, formatName };
}

UserList.vue

vue 复制代码 
<script setup lang="ts">
import { onMounted } from "vue";
import { useUsers } from "@/composables/useUsers";

const { users, loading, error, fetchUsers, formatName } = useUsers();

onMounted(fetchUsers);
</script>

<template>
  <div v-if="loading">加载中...</div>
  <div v-else-if="error">{{ error }}</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">
      {{ formatName(user) }}
    </li>
  </ul>
</template>

正确的案例中，UI 专注展示，逻辑由 useUsers 管理、useUsers 可被其他组件复用、只需要测试 useUsers 方法就行

UI组件 vs 业务组件

UI组件（Button, Modal, Table）：无业务逻辑，仅负责样式和交互

业务组件（UserList, OrderForm）：封装具体业务逻辑，复用 UI 组件

错误示例：业务逻辑写在 UI 组件

vue 复制代码 
<!-- Button.vue -->
<script setup>
const handleSaveUser = async () => {
  await api.saveUser()
}
</script>

<template>
  <button @click="handleSaveUser">保存</button>
</template>

正确示例：UI 组件尽量保证纯组件

vue 复制代码 
<!-- Button.vue -->
<template>
  <button><slot /></button>
</template>

<!-- UserForm.vue -->
<Button @click="saveUser">保存</Button>

在写业务组件的时候，利用Composition API 分离逻辑，把 API 调用、数据处理抽离到 composable 中

避免直接操作 DOM

除非必要尽量不要使用 document.querySelector 等直接操作 DOM

错误示例

typescript 复制代码 
onMounted(() => {
  const el = document.querySelector('.btn')
  el?.addEventListener('click', () => { ... })
})

正确示例

vue 复制代码 
<template>
  <button @click="handleClick" class="btn">Click</button>
</template>

<script setup lang="ts">
function handleClick() {
  // 处理逻辑
}
</script>

单元测试

1. 单元测试应覆盖核心业务逻辑，避免测试无意义的渲染细节

测试应聚焦于组件的行为和业务逻辑，而非仅仅验证静态的 DOM 结构，避免脆弱且维护成本高的测试。

错误示例

ts 复制代码 
// 测试仅验证 DOM 具体标签和类名，DOM 结构细节变动即破坏测试
test('renders exact button markup', () => {
  const wrapper = mount(MyButton)
  expect(wrapper.html()).toBe('<button class="btn primary">Submit</button>')
})

正确示例

ts 复制代码 
// 测试按钮是否存在且包含正确文本，关注业务效果而非具体标签细节
test('renders submit button', () => {
  const wrapper = mount(MyButton)
  const button = wrapper.find('button')
  expect(button.exists()).toBe(true)
  expect(button.text()).toBe('Submit')
})

2. 使用 Vue Test Utils 的异步渲染工具时，要正确等待 nextTick

Vue3 组件中很多行为是异步更新的，测试中操作后必须调用 await nextTick() 或使用 flushPromises() 等方法，确保断言是在 DOM 更新完成后进行。

错误示例

ts 复制代码 
test('click increments count', () => {
  const wrapper = mount(Counter)
  wrapper.find('button').trigger('click')
  expect(wrapper.text()).toContain('Count: 1') // 断言过早，失败
})

正确示例

ts 复制代码 
import { nextTick } from 'vue'

test('click increments count', async () => {
  const wrapper = mount(Counter)
  await wrapper.find('button').trigger('click')
  await nextTick()
  expect(wrapper.text()).toContain('Count: 1')
})

3. 事件触发测试必须确保事件正确被捕获并处理

测试组件自定义事件或原生事件时，需确保事件被正确监听，并使用 emitted() 方法断言事件触发，避免事件未触发测试通过的假象。

错误示例

ts 复制代码 
test('emits submit event', () => {
  const wrapper = mount(FormComponent)
  wrapper.find('form').trigger('submit')
  expect(wrapper.emitted('submit')).toBeTruthy() // 可能事件未触发，但断言粗略
})

正确示例

ts 复制代码 
test('emits submit event once', async () => {
  const wrapper = mount(FormComponent)
  await wrapper.find('form').trigger('submit.prevent')
  const submitEvents = wrapper.emitted('submit')
  expect(submitEvents).toHaveLength(1)
})

4. 不要在测试中硬编码组件内部状态，尽量从外部输入和输出测试

单元测试应以组件的公开接口（props、事件）为测试点，避免直接访问或修改组件内部私有数据，保持测试的稳健性和解耦。

错误示例

ts 复制代码 
test('increments count internally', () => {
  const wrapper = mount(Counter)
  wrapper.vm.count = 5
  wrapper.vm.increment()
  expect(wrapper.vm.count).toBe(6) // 依赖内部状态
})

正确示例

ts 复制代码 
test('increments count via user interaction', async () => {
  const wrapper = mount(Counter)
  await wrapper.find('button.increment').trigger('click')
  expect(wrapper.text()).toContain('Count: 1')
})

5. 避免在测试中使用复杂的真实 API 请求，应使用 Mock 或 Stub

测试时不应依赖外部接口的真实请求，推荐使用 jest.mock、msw、sinon 等模拟数据，保证测试的独立性和稳定性。

错误示例

ts 复制代码 
test('fetches data and renders', async () => {
  const wrapper = mount(DataComponent)
  await wrapper.vm.fetchData() // 真实请求导致测试不稳定
  expect(wrapper.text()).toContain('Data loaded')
})

正确示例

ts 复制代码 
import axios from 'axios'
jest.mock('axios')

test('fetches data and renders', async () => {
  axios.get.mockResolvedValue({ data: { items: ['a', 'b'] } })
  const wrapper = mount(DataComponent)
  await wrapper.vm.fetchData()
  expect(wrapper.text()).toContain('a')
})

6. 组件依赖的异步行为应通过 Mock 异步函数进行控制

若组件依赖异步方法（如定时器、异步 API），应在测试中 Mock 这些异步行为，避免测试时间过长或不稳定。

错误示例

ts 复制代码 
test('auto refresh updates data', async () => {
  const wrapper = mount(AutoRefresh)
  await new Promise(r => setTimeout(r, 5000)) // 测试过慢且不确定
  expect(wrapper.text()).toContain('Refreshed')
})

正确示例

ts 复制代码 
jest.useFakeTimers()

test('auto refresh updates data', async () => {
  const wrapper = mount(AutoRefresh)
  jest.advanceTimersByTime(5000)
  await nextTick()
  expect(wrapper.text()).toContain('Refreshed')
  jest.useRealTimers()
})

7. 使用快照测试时应谨慎，避免大规模快照导致维护困难

快照测试适合对关键 UI 做稳定性检测，但不应滥用，避免包含无关紧要的 DOM 变动。

错误示例

ts 复制代码 
test('renders full component snapshot', () => {
  const wrapper = mount(ComplexComponent)
  expect(wrapper.html()).toMatchSnapshot() // 快照过大，难维护
})

正确示例

ts 复制代码 
test('renders header snapshot only', () => {
  const wrapper = mount(ComplexComponent)
  expect(wrapper.find('header').html()).toMatchSnapshot()
})

8. 单元测试中避免使用全局依赖，推荐注入依赖或使用 provide/inject Mock

Vue3 组件可能依赖全局插件或 provide/inject，测试时应 Mock 这些依赖，避免测试受全局状态影响。

错误示例

ts 复制代码 
test('uses global i18n', () => {
  const wrapper = mount(ComponentUsingI18n)
  expect(wrapper.text()).toContain('Hello') // 依赖真实 i18n，环境复杂
})

正确示例

ts 复制代码 
import { createI18n } from 'vue-i18n'

const i18n = createI18n({ locale: 'en', messages: { en: { hello: 'Hello' } } })

test('uses mocked i18n', () => {
  const wrapper = mount(ComponentUsingI18n, {
    global: { plugins: [i18n] }
  })
  expect(wrapper.text()).toContain('Hello')
})
相关推荐
计算机学姐5 小时前
基于SpringBoot的高校社团管理系统【协同过滤推荐算法+数据可视化】
java·vue.js·spring boot·后端·mysql·信息可视化·推荐算法
Jonathan Star8 小时前
沉浸式雨天海岸：用A-Frame打造WebXR互动场景
前端·javascript
工业甲酰苯胺9 小时前
实现 json path 来评估函数式解析器的损耗
java·前端·json
老前端的功夫9 小时前
Web应用的永生之术：PWA落地与实践深度指南
java·开发语言·前端·javascript·css·node.js
LilySesy9 小时前
ABAP+WHERE字段长度不一致报错解决
java·前端·javascript·bug·sap·abap·alv
Wang's Blog10 小时前
前端FAQ: Vue 3 与 Vue 2 相⽐有哪些重要的改进?
前端·javascript·vue.js
再希11 小时前
React+Tailwind CSS+Shadcn UI
前端·react.js·ui
用户479492835691511 小时前
JavaScript 的 NaN !== NaN 之谜：从 CPU 指令到 IEEE 754 标准的完整解密
前端·javascript
群联云防护小杜11 小时前
国产化环境下 Web 应用如何满足等保 2.0？从 Nginx 配置到 AI 防护实战
运维·前端·nginx
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04Linux下V2Ray安装配置指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06npm使用国内淘宝镜像的方法07BongoCat - 跨平台键盘猫动画工具08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09jdk21下载、安装（Windows、Linux、macOS）10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南