AI 编程基础

心态转变

你不是要成为能徒手写代码的工程师。你需要的是阅读理解能力——就像你不需要会写小说，但能读懂一篇文章。

阅读代码的三步法

第一步：看结构

先扫一眼文件，找到：

文件顶部 → import 语句（引入了什么依赖）
中间 → 函数和组件（做了什么功能）
底部 → export 语句（导出了什么）

第二步：追踪数据流

数据从哪里来 → 经过什么处理 → 显示在哪里

第三步：读懂关键逻辑

找到核心的 if/else、函数调用，理解”什么条件下做什么事”。

实战：读懂一个 Vue 组件

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">
    点击了 {{ count }} 次
  </button>
</template>

逐行看懂：

import { ref } from 'vue' → 从 Vue 里引入一个叫 ref 的工具
const count = ref(0) → 创建一个变量 count，初始值 0
function increment() → 定义一个叫 increment 的函数
count.value++ → 把 count 的值加 1
<button @click="increment"> → 按钮，点击后调用 increment
{{ count }} → 在页面上显示 count 的值

结论： 这是一个计数器，每点一次数字 +1。

常见的代码模式

模式 1：列表渲染

items.map(item => <Card title={item.title} />)

→ 遍历一个列表，每个元素生成一个 Card 组件。

模式 2：条件显示

{isLoading ? <Spinner /> : <Content />}

→ 如果正在加载，显示加载动画；否则显示内容。

模式 3：事件处理

const handleSubmit = () => {
  if (!name) return alert('请填写姓名');
  save(name);
};

→ 提交时：如果没填名字就弹窗提醒，否则保存。

模式 4：异步数据

const data = await fetch('/api/users');

→ 从服务器获取用户数据，拿到了再继续执行。

看不懂怎么办

方法 1：直接问 AI

“帮我解释这段代码：[粘贴代码]“

方法 2：让 AI 画流程图

“用文字描述一下这个函数的执行流程”

方法 3：逐行问

“这段代码第 5 行的 await 是什么意思？“

方法 4：加 console.log

console.log('当前值：', count);
console.log('函数被调用了');

→ 在浏览器控制台看到输出，就知道代码什么时候执行了。

阅读代码的 check list

当你拿到 AI 生成的代码，快速检查：

import 引入了什么？（有没有奇怪的依赖？）
有没有操作本地存储的代码？（涉及隐私？）
有没有发网络请求？（发到哪里？）
函数名能不能看懂？（getUser、saveData…）

小结

代码阅读能力会随着实践自然提升。核心方法：

先扫结构
追踪数据流
不懂就问 AI
试着改一点看看效果

下一篇我们学习如何排查和修复常见的错误。