打开任何一个用 Vue 做的站案网站，右键查看源代码，站案你大概率只会看到一个空的站案 <div id="app"></div>。这不是站案网站坏了，而是站案 Vue 的工作方式——它把渲染这件事从服务器搬到了浏览器里。用户看到的站案页面，是站案 JavaScript 在客户端跑完之后才“长”出来的。

我最早接触的站案一个 Vue 案例是个后台管理系统。登录进去之后，站案左侧是站案菜单栏，右侧是站案内容区，点菜单切换页面时整个浏览器不会刷新。站案当时觉得挺神奇，站案后来自己上手写才发现，站案这背后就是站案 Vue Router 在做事情。路由配置里每个路径对应一个组件，切换路径时 Vue 把旧组件销毁、新组件挂载，DOM 操作全由框架接管。开发者只需要关心“这个路径该显示什么”，不用去写 document.getElementById 那一套。

还有一个让我印象深刻的例子是个电商网站的商品列表页。商品卡片滚动加载，每张卡片上有图片、价格、加入购物车按钮。用 Vue 写的话，商品数据就是一个数组，模板里用 v-for 循环渲染。用户点“加入购物车”，按钮上的数字实时变化，靠的是响应式数据绑定。数据一变，视图自动更新，不需要手动去改 DOM 里的文本内容。这种“数据驱动视图”的思路，写起来确实比 jQuery 时代省心不少。

不过 Vue 网站也不是没有代价。首屏加载慢是个老问题。因为浏览器要先下载 Vue 的运行时、再下载各个组件的代码，最后才渲染出内容。用户盯着白屏等一两秒是常有的事。后来出现了服务端渲染（SSR）和静态站点生成（SSG）这些方案，Nuxt.js 就是干这个的。它在服务器端先把 HTML 拼好发给浏览器，用户能更快看到内容，之后 Vue 再“接管”页面，让它变成可交互的。这个接管过程叫 hydration，听起来挺高级，实际上就是给静态 HTML 绑上事件监听。

我观察到一个有意思的现象：很多团队用 Vue 做项目，写着写着就变成了“Vue 味的 jQuery”。比如有人还是习惯用 this.$refs.xxx 去直接操作 DOM，或者把所有状态都塞进一个巨大的 Vuex store 里，组件之间靠事件总线乱传。框架本身没问题，但用法上走了回头路。Vue 3 的 Composition API 其实在鼓励把逻辑按功能拆开，而不是按选项类型（data、methods、computed）堆在一起。一个 useCart() 函数可以把购物车相关的响应式数据和方法都封装好，哪个组件需要就引入，比混在 this 上清晰得多。

再说个具体的。有次我帮朋友看一个 Vue 2 的页面，列表渲染特别卡。查了半天发现他在 v-for 里同时用了 v-if，而且 key 用的是 index。列表一排序，Vue 就懵了，它分不清哪个元素是哪个，只能大量重新渲染。把 key 换成唯一 id 之后，流畅多了。这种细节文档里其实写了，但很多人不看，出了问题才回头翻。

Vue 的生态现在挺全的。Element Plus、Ant Design Vue 这些 UI 库拿来就能用，Pinia 替代了 Vuex 做状态管理，Vite 做开发服务器启动飞快。但工具多了也容易让人迷失。我见过一个项目，光状态管理就用了 Vuex、Pinia 和组件内部的 reactive 三套并存，维护起来简直是灾难。选一套用到底，比什么都强。

说到底，Vue 是个工具。它让写交互式网页变得简单，但简单不等于可以不动脑子。理解它的响应式原理、组件生命周期、虚拟 DOM 的 diff 策略，比死记 API 重要得多。下次再看到一个 Vue 网站，不妨打开开发者工具，看看那些组件树是怎么嵌套的，数据是怎么流动的。比看十篇教程都管用。