从老码农视角带你零基础入门Vue.js

上周五晚上十点半，我还在公司调一个奇怪的UI渲染问题。新来的前端实习生一脸懵地看着我敲Vim，问我：“哥，你不用VS Code啊？”我笑了笑没说话，心里却在想：这孩子估计连.vimrc都没见过。

我是那种35岁还在一线写代码的老程序员，最近刚跳槽到一家做SaaS工具的新公司，入职才两个月。团队里除了我，清一色95后，连产品经理都比我小五岁。说实话，一开始有点慌——不是技术跟不上，而是怕自己“老派”思维跟他们格格不入。但很快我发现，大家其实挺尊重经验的，尤其是当我用一行grep -r "v-model" src/帮他们定位出一个隐藏很深的状态绑定Bug时，整个会议室安静了三秒，然后爆发出“牛逼”的赞叹声。

这次写这篇《从老码农视角带你零基础入门Vue.js》，是因为我们组最近要重构一个内部管理后台，领导点名要用Vue 3 + TypeScript。而我们招来的几个应届生，连SPA（单页应用）是什么都说不清楚。更离谱的是，有位同事居然问我：“Vue和View是不是同一个东西？”我当时差点把咖啡喷出来。

但冷静下来一想，谁不是从零开始的呢？当年我学jQuery的时候，还觉得$().click()是魔法呢。所以今天，我就以一个“老家伙”的身份，带大家从零开始，踏踏实实地走进Vue的世界——不吹牛、不画饼，只讲能跑起来的代码和避得开的坑。

---

为什么是Vue？而不是React或Angular？

先别急着骂我“Vue党”。其实我对React也熟，甚至给公司上过Electron + React的桌面端项目。但在中小型团队、快速交付场景下，Vue真的香。

我们公司现在的节奏是“两周一个版本”，产品经理提需求从来不看日历——上周三下午三点，他说：“这个筛选器能不能加个动态条件组合？明天上线。”我当时心里一万只羊驼奔腾，但转头用Vue的<component :is="...">动态组件+v-for循环，两小时搞定，测试都没找我麻烦。

Vue的优势在哪？

• 学习曲线平缓：模板语法接近HTML，新人上手快。
• 文档极其友好：官方教程堪称业界标杆，连我这种讨厌看文档的人都忍不住夸。
• 生态成熟：Vuex（状态管理）、Vue Router（路由）、Vite（构建工具）一整套开箱即用。
• TypeScript支持越来越好：Vue 3原生用TS重写，类型推导比React某些库还稳。

当然，如果你要做超大型应用（比如字节那种千万级DAU），React可能更合适。但我们这种几十人团队、做B端系统的，Vue足够了。

---

别被AI工具忽悠瘸了：Bolt.new、Devin、Claude Code能帮你什么？

最近圈子里都在吹AI编程助手，什么Bolt.new、通义千问、Devin、Claude Code，搞得好像明天就能取代程序员似的。

我试过Bolt.new——它确实能一键生成Vue项目脚手架，连Tailwind CSS都给你配好。但上周我让它生成一个带表单验证的用户注册页面，结果它把v-model绑在了<div>上，浏览器直接报错：Invalid prop: type check failed for prop "value". Expected String, got Object. 我当时就笑了：AI连Vue的基本规则都不懂，还敢自称“全栈工程师”？

通义千问倒是在解释概念上有点用。比如我问“Vue 3的Composition API和Options API区别”，它能给出结构清晰的回答。但一旦涉及具体业务逻辑（比如“如何在表单提交前校验多个异步接口”），它就开始胡说八道。

至于Devin和Claude Code，目前更多是噱头。它们可以帮你写单元测试、生成注释，但绝不能替代你对框架的理解。我见过实习生直接复制Claude生成的代码，结果在setup()里用了this，调试了整整一天。

我的建议是：把这些工具当“高级搜索引擎”，别当“代码生成器”。真正的生产力，还是来自你对Vue核心机制的理解。

---

从零开始：搭建你的第一个Vue 3项目

废话不多说，上手才是王道。我们用Vite（不是Webpack！那玩意儿配置起来能让你怀疑人生）来初始化项目。

npm create vue@latest my-vue-app

执行后会有一堆选项，建议这样选：

• ✅ Add TypeScript? → Yes
• ✅ Add JSX Support? → No（除非你特别需要）
• ✅ Add Vue Router? → Yes（几乎每个项目都需要路由）
• ✅ Add Pinia? → Yes（Vuex已过时，Pinia是官方推荐的状态管理）
• ✅ Add Vitest? → Yes（单元测试很重要，别偷懒）
• ✅ Add Cypress? → No（E2E测试后面再说）
• ✅ Add ESLint? → Yes
• ✅ Add Prettier? → Yes

等依赖装完，进入目录：

cd my-vue-app
npm run dev

浏览器打开 http://localhost:5173，看到那个旋转的Vue logo，恭喜你，迈出了第一步！

老码农吐槽：记得我第一次用Vue CLI时，光是npm install就卡了半小时，还得翻墙。现在Vite基于ES Modules原生支持，冷启动200ms，热更新50ms，真香！

---

理解Vue的核心：响应式与组件化

Vue最牛的地方不是语法糖，而是它的响应式系统。简单说：数据变了，视图自动更新。

看个例子（src/components/Counter.vue）：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 声明一个响应式变量
const count = ref(0)

// 定义方法
function increment() {
  count.value++ // 注意：ref需要.value访问
}
</script>

这里的关键是 ref()。它是Vue 3 Composition API的核心API之一。很多人初学时总忘记.value，结果控制台报错：Cannot assign to 'count' because it is a constant。

踩坑记录：上周有个同事把ref写成let count = 0，然后在模板里用{{ count }}，点击按钮发现页面没变。他以为Vue坏了，其实是数据根本不是响应式的！

组件化则是另一个重点。Vue鼓励你把UI拆成小块，比如：

• <UserAvatar />
• <DataTable />
• <SearchBar />

每个组件有自己的逻辑、样式、状态，彼此隔离。这样后期维护、复用都方便。

---

路由与状态管理：别再把所有逻辑塞进App.vue

很多新手喜欢把所有代码写在App.vue里，结果文件上千行，改一处崩三处。

正确姿势是：

1. 路由分拆：用Vue Router定义页面级组件。
2. 状态集中管理：用Pinia管理全局状态（比如用户信息、主题设置）。

创建一个简单的Pinia store（src/stores/user.ts）：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    isLoggedIn: false
  }),
  actions: {
    login(username: string) {
      this.name = username
      this.isLoggedIn = true
    },
    logout() {
      this.$reset() // Pinia提供的重置方法
    }
  }
})

在组件中使用：

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const user = useUserStore()

function handleLogin() {
  user.login('老张')
}
</script>

路由配置（src/router/index.ts）也建议按模块拆分，别全堆在一个文件里。

---

安全意识：别让XSS和CSRF毁了你的应用

作为老程序员，我必须强调：前端安全不是后端的事！

Vue虽然默认会对插值内容做HTML转义（{{ userContent }}不会执行JS），但如果你用了v-html，那就危险了：

<!-- 千万别这么干！ -->
<div v-html="userInput"></div>

如果userInput包含<script>alert('xss')</script>，你的用户就遭殃了。

正确做法：

• 避免使用v-html，除非内容是你完全信任的（比如后台编辑的富文本）。
• 如果必须用，先用DOMPurify等库过滤：

import DOMPurify from 'dompurify'

const cleanHTML = DOMPurify.sanitize(dirtyHTML)

另外，表单提交时记得带上CSRF Token（通常由后端提供），不要裸奔POST请求。

---

性能优化：别让用户等得想砸电脑

Vue本身性能不错，但写法不对照样卡成PPT。

几个实用技巧：

1. 列表渲染加key：<li v-for="item in list" :key="item.id">，避免Vue复用错误节点。
2. 避免在模板中写复杂表达式：比如{{ items.filter(x => x.active).map(x => x.name).join(', ') }}，应该移到计算属性。
3. 懒加载路由：用动态import减少首屏包体积。

// router/index.ts
{
  path: '/dashboard',
  component: () => import('@/views/Dashboard.vue') // 懒加载
}

4. 用v-show代替v-if：频繁切换的元素用v-show（只是CSS切换），一次性渲染用v-if。

我们项目上线前做了Lighthouse测试，首屏加载从3.2s优化到1.1s，老板当场请我们喝了奶茶。

---

调试技巧：Chrome DevTools + Vue Devtools

别只会console.log！装上Vuex Devtools，你能：

• 实时查看组件树
• 监控Pinia状态变化
• 时间旅行调试（回放状态变更）

在Vim里开发的朋友别慌——我平时也是终端+Vim+tmux三件套，但调试时一定会打开Chrome。毕竟可视化工具效率高太多。

---

给新人的忠告：别迷信框架，理解本质更重要

Vue也好，React也罢，本质都是解决UI与状态同步的问题。框架会变，但编程思想不变。

我见过太多人沉迷于“最新语法糖”，却连闭包、事件循环都说不清。结果遇到复杂场景（比如嵌套异步状态更新），直接懵圈。

所以我的建议是：

• 先掌握JavaScript基础（尤其是ES6+）
• 理解浏览器渲染机制（重排、重绘）
• 学会读官方文档（Vue文档真的很好读）
• 多写多调试，别光看视频

---

结语：老程序员还在路上

写这篇文章时，窗外已经天亮了。又是一个通宵，但值得。因为我看到实习生昨天终于独立完成了一个带分页、搜索、导出功能的数据表格组件，还主动加了单元测试。

技术在变，但热爱不变。35岁写代码不可耻，可耻的是停止学习。

Vue.js是个不错的起点。它温和、务实、高效——就像我们这些老码农一样。

最后送大家一句话：代码写得好不好，不看用了多少新特性，而看能不能让产品准时上线、让用户少骂两句。

共勉。

---

附：常用工具对比表

工具/服务	适合场景	老码农评价
Vite	快速启动Vue项目	⭐⭐⭐⭐⭐ 冷启动快如闪电
Pinia	状态管理	⭐⭐⭐⭐ 比Vuex清爽太多
Vue Devtools	调试组件与状态	⭐⭐⭐⭐ 必装
Bolt.new	AI生成项目脚手架	⭐⭐ 生成代码需人工审查
通义千问	概念解释、文档查询	⭐⭐⭐ 可辅助学习
Devin / Claude	代码补全、注释生成	⭐⭐ 谨慎使用，别盲目信任

注：以上星级纯属个人主观感受，不构成购买建议。