vue菜鸟教程

打开 Vue 的菜程官方文档，第一眼看到的鸟教就是“渐进式框架”五个字。很多人被这个词唬住了，菜程其实说白了就是鸟教：你可以只用它最核心的模板语法，也可以把路由、菜程状态管理、鸟教构建工具全套配齐。菜程我见过一个后端同事，鸟教直接在 HTML 里用 script 标签引入 Vue，菜程三分钟就改好了公司后台的鸟教一个表格筛选功能。他没装 node，菜程没跑 npm，鸟教甚至不知道什么叫单文件组件。菜程

这就是鸟教 Vue 最讨喜的地方——它不强制你按某种方式组织代码。你用 CDN 引入，菜程写个 new Vue({ el: '#app', data: { msg: 'hello' } })，页面上 { { msg }} 就能显示出来。没有虚拟 DOM 的玄学，没有 JSX 的编译门槛。模板就是 HTML 加几个指令，v-if、v-for、v-bind，看名字猜功能，猜得八九不离十。

但别误会，简单不等于弱。去年我重构一个后台管理系统，列表页有 2000 多条数据，带筛选、排序、分页。用 v-for 渲染的同时，给每个 item 绑定 :key，配合 computed 做过滤，页面响应依然顺滑。Vue 的响应式系统在背后做了依赖追踪，数据一变，视图自动更新。你不需要手动操作 DOM，也不用写 document.querySelector 那一套。这种“数据驱动视图”的思路，一旦习惯就回不去了。

组件是另一个分水岭。刚开始你可能把所有逻辑塞在一个 new Vue 实例里，data 几十个字段，methods 上百行。写着写着就乱了。这时候把重复的 UI 块抽成组件，比如一个 <user-card>，接收 props，内部维护自己的状态。父组件传数据，子组件触发 $emit 事件，通信路径清晰。我见过一个项目，把整个页面的每个按钮都做成组件，过度设计，反而难维护。组件化是手段，不是目的。

单文件组件（.vue 文件）是 Vue 的杀手锏。一个文件里，<template> 写结构，<script> 写逻辑，<style scoped> 写样式。scoped 让样式只作用于当前组件，不用再纠结 class 命名冲突。配合 Vue CLI 或 Vite，热更新快得离谱。改一行文字，浏览器不刷新就变了。这种开发体验，比传统 jQuery 拼接字符串舒服太多。

不过 Vue 3 的 Composition API 刚出来时，我挺抵触的。好好的 data、methods 不用，非要搞 setup() 和 ref。后来写了一个复杂表单组件，逻辑按功能分块，用 reactive 组织状态，watchEffect 处理副作用，突然发现代码可以按业务逻辑聚合，而不是按选项类型分散。现在新项目我基本都用 <script setup>，少写很多样板代码。

生态方面，Vue Router 和 Pinia 是标配。路由守卫做权限控制，beforeEach 里判断 token，没登录就跳转。Pinia 比 Vuex 简单，没有 mutation，直接改 state。我更喜欢 Pinia 的写法，少一层概念，少一层心智负担。UI 库 Element Plus 或 Ant Design Vue，拿来就用，省去造轮子。

学习 Vue 的路径很直接：先玩模板语法，再理解组件通信，然后上手单文件组件和路由。别一上来就啃源码，响应式原理可以后面再看。遇到问题查官方文档，中文翻译质量很高。社区里踩坑记录也多，搜一下基本有答案。Vue 不是银弹，但用它做中小型项目，开发效率确实高。至少对我来说，写 Vue 比写 React 少纠结一些“这该放哪”的问题。