AI 写的代码＂看起来太对＂,才是它最危险的地方:识别 AI 写代码的 15 个常见坑

AI 代码最大的问题，是"看起来太对"

15 个陷阱（按严重程度排序）

<!-- AI 写的：处理"富文本"展示 -->

<script setup lang="ts">

defineProps<{ content: string }>()

</script>

<template>

<div v-html="content"></div>

</template>

<script setup lang="ts">

import DOMPurify from 'dompurify'

import { computed } from 'vue'

const props = defineProps<{ content: string }>()

const sanitized = computed(() => DOMPurify.sanitize(props.content))

</script>

<template>

<div v-html="sanitized"></div>

</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue'

const props = defineProps<{ userId: string }>()

const user = ref(null)

onMounted(() => {

fetch(`/api/users/${props.userId}`)

.then(r => r.json())  // 非 JSON 会 throw

.then(data => user.value = data)  // null 时崩溃

})

</script>

<template>

<div>{{ user.name }}</div>

</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue'

interface User { id: string; name: string }

const props = defineProps<{ userId: string }>()

const user = ref<User | null>(null)

const loading = ref(true)

const error = ref<Error | null>(null)

onMounted(() => {

loading.value = true

fetch(`/api/users/${props.userId}`)

.then(r => r.json())

.then(data => user.value = data)

.catch(e => error.value = e)

.finally(() => loading.value = false)

})

</script>

<template>

<Skeleton v-if="loading" />

<ErrorMessage v-else-if="error" :error="error" />

<Empty v-else-if="!user" />

<div v-else>{{ user.name }}</div>

</template>

// main.ts

app.config.errorHandler = (err) => {

// 上报到监控 + 显示错误页

}

// AI 写的"快速对接"

const API_KEY = 'sk-xxxxxxxxxxxxxxxx'

const API_BASE = 'https://internal-api.company.com'

// Vite 项目：使用 import.meta.env

const API_KEY = import.meta.env.VITE_API_KEY

const API_BASE = import.meta.env.VITE_API_BASE

// 或：完全走代理，前端不接触密钥

const API_BASE = '/api/proxy'

// AI 写的"登录态持久化"

function login(token: string) {

localStorage.setItem('token', token)

localStorage.setItem('user', JSON.stringify(userInfo))

}

function login(userInfo: UserInfo) {

localStorage.setItem('theme', userInfo.preferences.theme)

}

<script setup lang="ts">

import { ref } from 'vue'

const query = ref('')

const results = ref<any[]>([])

const handleSearch = async (q: string) => {

const data = await api.search(q)

results.value = data  // 输入 "abc"，但 "a" 的请求后返回 → 覆盖

}

</script>

<template>

<input v-model="query" @input="handleSearch(query)" />

</template>

<script setup lang="ts">

import { ref, watch } from 'vue'

const query = ref('')

const results = ref<any[]>([])

watch(query, async (newQuery, _, onCleanup) => {

const controller = new AbortController()

onCleanup(() => controller.abort())

const data = await api.search(newQuery, { signal: controller.signal })

results.value = data

})

</script>

<template>

<input v-model="query" />

</template>

<script setup lang="ts">

import { ref, watch } from 'vue'

import { useRouter } from 'vue-router'

const router = useRouter()

const productId = ref('')

// 错误：把"点击跳转"放进 watch

watch(productId, (id) => {

if (id) router.push(`/product/${id}`)

})

</script>

<template>

<button @click="productId = '123'">查看</button>

</template>

<script setup lang="ts">

import { useRouter } from 'vue-router'

const router = useRouter()

</script>

<template>

<button @click="router.push('/product/123')">查看</button>

</template>

<script setup lang="ts">

import { computed } from 'vue'

const props = defineProps<{ product: { id: string; price: number } }>()

// 错误：基础计算根本不需要 computed

const formattedPrice = computed(() => `¥${props.product.price.toFixed(2)}`)

// 内联函数：Vue 没有 useCallback 的需求

const handleClick = () => console.log(props.product.id)

</script>

<script setup lang="ts">

const props = defineProps<{ product: { id: string; price: number } }>()

const formattedPrice = `¥${props.product.price.toFixed(2)}`

const handleClick = () => console.log(props.product.id)

</script>

async function loadUser(id: string) {

const res = await fetch(`/api/users/${id}`)

const user = (await res.json()) as any

return user

}

interface User {

id: string

name: string

email: string

}

async function loadUser(id: string): Promise<User> {

const res = await fetch(`/api/users/${id}`)

if (!res.ok) throw new Error('Failed to load user')

return res.json() as Promise<User>

}

<!-- AI 写的：用 index 作 key -->

<script setup lang="ts">

import type { Todo } from './types'

defineProps<{ todos: Todo[] }>()

</script>

<template>

<ul>

<TodoItem

v-for="(todo, index) in todos"

:key="index"

:todo="todo"

/>

</ul>

</template>

<template>

<ul>

<TodoItem

v-for="todo in todos"

:key="todo.id"

:todo="todo"

/>

</ul>

</template>

<!-- AI 写的 -->

<script setup lang="ts">

import { ref, onMounted } from 'vue'

import type { User } from './types'

const users = ref<User[]>([])

onMounted(() => {

api.getUsers().then(data => users.value = data)

})

</script>

<template>

<ul>

<li v-for="u in users" :key="u.id">{{ u.name }}</li>

</ul>

</template>

<script setup lang="ts">

import { ref, onMounted, computed } from 'vue'

import type { User } from './types'

const users = ref<User[]>([])

const loading = ref(true)

const error = ref<Error | null>(null)

const isEmpty = computed(() => !loading.value && !error.value && users.value.length === 0)

onMounted(() => {

loading.value = true

api.getUsers()

.then(data => users.value = data)

.catch(e => error.value = e)

.finally(() => loading.value = false)

})

</script>

<template>

<Skeleton v-if="loading" />

<ErrorMessage v-else-if="error" :error="error" />

<Empty v-else-if="isEmpty" />

<ul v-else>

<li v-for="u in users" :key="u.id">{{ u.name }}</li>

</ul>

</template>

import _ from 'lodash'

const cloned = _.cloneDeep(obj)

import moment from 'moment'

const formatted = moment(date).format('YYYY-MM-DD')

// 深拷贝

const cloned = structuredClone(obj)

// 日期格式化

const formatted = new Intl.DateTimeFormat('zh-CN', {

year: 'numeric', month: '2-digit', day: '2-digit'

}).format(date)

async function saveData(data: any) {

try {

await api.save(data)

} catch (e) {

console.log('error', e)  // 仅打印

}

}

async function saveData(data: Data) {

try {

await api.save(data)

showToast('保存成功')

} catch (e) {

showToast(`保存失败：${e.message}`, 'error')

}

}

// 只有 ProductCard 调用了它

function formatDate(date: Date): string {

return new Intl.DateTimeFormat('zh-CN').format(date)

}

<!-- ProductCard.vue -->

<script setup lang="ts">

import type { Product } from './types'

const props = defineProps<{ product: Product }>()

const dateText = formatDate(props.product.createdAt)

</script>

<template>

<div>{{ dateText }}</div>

</template>

<!-- ProductCard.vue -->

<script setup lang="ts">

import type { Product } from './types'

const props = defineProps<{ product: Product }>()

const dateText = new Intl.DateTimeFormat('zh-CN').format(props.product.createdAt)

</script>

<template>

<div>{{ dateText }}</div>

</template>

function getUserName(user: User) {

// 获取用户名字

return user.name

}

function getUserName(user: User) {

// 后端返回的 name 字段可能为空字符串（已注销用户）

return user.name || '匿名用户'

}

interface UserData {

user_id: string

userName: string

uid: number

}

interface User {

id: string

name: string

}

一份精简的 Review Checklist

团队怎么落地

## AI 代码声明

- [ ] 本 PR 包含 AI 生成的代码

- [ ] P0 检查项全部通过

- [ ] P1 检查项至少 80% 通过

// eslint.config.js

export default [

{

rules: {

'vue/no-v-html': 'error',  // v-html 必须人工 review

'@typescript-eslint/no-explicit-any': 'warn',  // 警告 any

}

}

]

几条带走的工程心法