这一章我们来啃 Vue 核心技术。前面的内容如果你已经跟下来组件、指令、插槽这些基础概念应该都不陌生了还没看过的朋友也不用慌这一章我会把知识点重新串一遍重点放在“为什么这样设计”和“实际项目里怎么用”上。学完这一章你能搞清楚响应式到底是怎么实现的、computed 和 watch 该怎么选、路由跳转的常见坑、前后端分离项目怎么联调、以及那些让你抓狂的报错到底在说什么。适合刚入门 Vue 想进阶的人也适合写了一年 Vue 但总觉得哪里没想通的人。很多人学 Vue 容易陷入一个误区跟着教程写了几个 demo组件会用了路由会配了但一碰到真实项目就卡住。因为真实项目里没有“标准答案”你需要理解 Vue 的核心运行机制才能在遇到问题的时候快速定位。所以我不会只给你堆 API而是把这一章拆成四个部分先讲设计和思路再讲核心细节然后走一遍完整实操最后整理高频问题的排查经验。1. Vue 核心设计思路拆解先理解框架在替你做什么1.1 从“操作 DOM”到“操作数据”的思维转换Vue 最核心的价值就是让你从繁琐的 DOM 操作里解放出来。传统 jQuery 时代我们干的是这种事拿到数据手动找到 DOM 节点改它的 innerHTML、class、style数据一变就要重新找节点重新改。这种做法的痛点在于DOM 状态和业务数据是分离的你得自己维护它们的一致性。Vue 把这个问题翻转过来你只需要维护一份“数据”框架负责把这份数据映射成界面。数据变了界面自动变。这就是声明式渲染。你告诉 Vue“界面长什么样、依赖哪些数据”剩下的脏活累活框架替你干了。这个思路听起来简单但它背后牵涉到一套完整机制响应式系统、模板编译、虚拟 DOM、diff 算法、组件更新调度。为了让你把这一章学透先建立一个整体认知Vue 应用从启动到页面显示大致经历三个阶段。第一阶段是初始化Vue 创建应用实例、解析组件配置、建立响应式数据第二阶段是挂载模板被编译成渲染函数渲染函数执行生成虚拟 DOM虚拟 DOM 再被转成真实 DOM 插入页面第三阶段是更新当响应式数据发生变化触发重新渲染新旧虚拟 DOM 对比之后以最小代价更新真实 DOM。整个过程中你完全不需要手动碰 DOM。1.2 为什么模板编译和虚拟 DOM 是关键中的关键模板编译这步很多初学者会忽略但它直接影响你写代码的方式。Vue 的模板不是直接被浏览器识别的它要先经过编译器处理变成一个渲染函数render function。渲染函数每次执行会返回一棵虚拟 DOM 树。虚拟 DOM 就是一个用 JavaScript 对象描述 DOM 结构的普通对象。它轻量、跨平台而且可以拿来对比。为什么要绕这么一圈直接操作真实 DOM 不行吗真实 DOM 的增删改查开销很大而且频繁操作会导致布局抖动性能难以控制。虚拟 DOM 先把变化记录在 JavaScript 层面然后通过 diff 算法找出真正需要变化的节点最后统一更新真实 DOM。这个流程虽然多了一步但换来的是可控的性能和跨平台能力。当然虚拟 DOM 不是银弹它不能保证你的应用绝对快。真正的问题往往出在“不必要的大范围渲染”上。你只要让响应式数据尽量精确、让组件拆分合理Vue 的更新开销就会非常小。这也是为什么 Vue 3 把响应式系统重写的原因之一用 Proxy 替代 Object.defineProperty能做到更细粒度的依赖追踪减少多余的触发。1.3 Vue 3 到底改了哪些底层机制直接影响你写代码习惯如果你还是用 Vue 2 的思维写 Vue 3 代码会踩不少暗坑。Vue 3 的响应式系统基于 Proxy和 Vue 2 的 Object.defineProperty 有本质区别。Vue 2 的响应式局限很明显新增属性不会触发更新需要用 Vue.set通过下标修改数组元素也不会触发更新需要特殊处理。Vue 3 用 Proxy 拦截对象的 get、set、deleteProperty 等操作新增属性、删除属性、数组索引修改都能被捕获响应式能力更完整。但 Proxy 带来一个非常容易忽略的问题响应式对象在 console.log 的时候打印出来是一堆 Proxy 包装后的结构看着很不直观。而且一旦你对响应式对象做解构、赋值给普通变量就可能丢失响应式。很多新手报错说“数据变了页面没反应”十有八九是这种问题。正确做法是用 toRefs、toRef 或者直接保持引用不拆散。还有一个重要区别Vue 3 引入了组合式 API也就是 setup 函数。它把同一个业务逻辑的代码集中在一起避免了 Vue 2 里 data、computed、watch、methods 四处分散的问题。这不是单纯为了换个写法而是为了解决大型组件代码组织混乱的痛点。我自己的习惯是一个功能模块相关的响应式数据、计算属性、监听器、方法全部放在一个独立的 composable 函数里组件里只负责调用阅读和维护都会轻松很多。2. 核心细节解析computed、watch、生命周期与组件通信2.1 computed 和 watch 到底怎么选别再把计算逻辑塞进 watchVue 的 computed 和 watch 都能响应数据变化但设计意图完全不同。computed 是“根据已有数据计算出新数据”它强调派生性。比如购物车列表 items 和折扣 discount你可以用 computed 计算出总价 totalPrice。computed 有缓存只有依赖的数据变化时才重新计算不依赖的数据变了不会触发这是它最值钱的地方。watch 是“监听数据变化后执行副作用”它强调过程性。比如用户切换了城市你需要重新请求天气数据搜索框输入变化需要防抖后发起请求某个状态变为 true 时需要弹窗提示。这些都是副作用操作应该放在 watch 里。一个很常见的坏习惯在 watch 里手动维护一个新变量把数据的“派生结果”算出来。比如 watch 监听 firstName 和 lastName然后拼接出 fullName。这就是典型的该用 computed 的场景。写成 computed 之后代码更短、性能更好、心智负担更小。另一个常见误区是过度使用 watch。如果一个值的变化永远由另一个值同步决定那它根本不应该作为独立状态存在用 computed 就够了。从设计上减少“状态地狱”比单纯优化代码更有效。2.2 watch 监听数组时为什么新值和旧值一样很多人在 watch 一个数组时发现回调里拿到的新值和旧值打印出来是一样的比如watch(list, (newVal, oldVal) { console.log(newVal oldVal); // true });根本原因是数组是引用类型。Vue 的 watch 默认比较的是引用而响应式数组在变更时很多方法push、splice、直接改下标都会在原数组上操作新、旧引用指向同一个内存地址所以打印出来当然一样。如果你确实需要拿到变更前的“内容快照”有两个办法。第一个用 deep 选项配合深拷贝在监听前手动复制一份watch(list, (newVal, oldVal) { console.log(newVal, oldVal); }, { deep: true });但注意deep: true 依然会把新值解析为响应式数组本身如果你希望 oldVal 是深拷贝的原始值需要自己处理。第二个更实用监听数组的“内容副本”比如监听 [...list] 或者 JSON 序列化后的字符串但这样开销较大只适合小数组。我的建议大多数业务场景你根本不需要区分新旧数组的完整差异你只需要知道“它变了”然后重新做业务处理。如果实在需要精确知道变了哪一项更推荐在修改数组的地方手动记录操作日志而不是依赖 watch 的新旧值比较。2.3 生命周期从创建到销毁每个阶段该干什么Vue 3 的生命周期钩子和 Vue 2 相比命名上加了 on 前缀用组合式 API 调用。常用的关键节点setup组件实例创建之前执行此时 props 已经解析但组件还没有挂载。onBeforeMount / onMounted挂载前和挂载后。onMounted 是最早能访问到真实 DOM 的时机DOM 操作、第三方库初始化、请求数据都可以放在这里。onBeforeUpdate / onUpdated数据更新重新渲染前后。注意 onUpdated 里不要修改会再次触发更新的数据容易死循环。onBeforeUnmount / onUnmounted卸载前和卸载后。定时器、事件监听、全局订阅、手动创建的 DOM 都要在这里清理否则会内存泄漏。有个高频场景是“父组件传过来的 props 变化了子组件要重新做初始化逻辑”。很多人会想用 watch 去监听但如果你希望 props 每次变化时重新发请求更推荐直接 watch 带 immediate: true这样首次渲染也会触发逻辑统一。还有一点容易被忽略不要在生命周期函数里写太重的同步逻辑。比如 onMounted 里执行一个高频耗时计算会阻塞首屏渲染。如果有大计算量任务考虑用 requestAnimationFrame 或者 setTimeout 延后执行让浏览器先绘制页面。2.4 组件通信的几条路props、emit、v-model、provide/inject组件通信是所有 Vue 项目里绕不开的话题。最基础的是 props 向下传、emit 向上通知这是单向数据流的核心。props 是只读的子组件不能直接改 props如果要让父组件感知变化应该通过 emit 抛事件。很多新手会直接改 props然后发现 Vue 警告 “Avoid mutating a prop directly”这就是在提醒你违反了单向数据流。v-model 本质上是 props emit 的语法糖。Vue 3 中组件上的 v-model 默认展开为 modelValue prop 和 update:modelValue 事件。如果你封装输入组件只需要接收 modelValue然后在值变化时 emit 更新。provide/inject 适合跨多级组件传值比如主题配置、用户信息、全局设置。它的好处是不需要一层层透传 props但代价是数据来源不如 props 直观滥用会让组件关系变得难以追踪。我的经验只在“自上而下的全局共享型数据”场景用 provide/inject其他场景老老实实用 props emit。如果项目规模变大组件间通信特别复杂就要考虑引入 Pinia 了。Pinia 是 Vue 3 官方推荐的状态管理库它天然和组合式 API 配合得好没有 Vuex 里那些繁琐的 mutations、modules 嵌套限制心智负担小很多。3. 实操过程从环境搭建到前后端联调到部署3.1 环境准备Node、npm、Vue CLI 与 Vite 的取舍开始实操之前先把环境说清楚。Vue 3 现在官方推荐用 Vite 作为构建工具而不是 Vue CLI。Vite 的开发服务器基于原生 ES Module冷启动速度快到飞起热更新也是毫秒级Vue CLI 基于 Webpack配置生态成熟但开发启动慢、配置复杂。新项目我建议直接用 Vite。你只需要装好 Node.js然后执行npm create vuelatest这个命令会启动一个交互式脚手架询问是否安装 TypeScript、Vue Router、Pinia、ESLint、Vitest 等。新手可以先不装 TypeScript等熟悉了再上但 Vue Router 和 Pinia 建议勾上真实项目基本都要用。创建完成后进入目录安装依赖并启动cd my-vue-app npm install npm run dev这里有个常见的坑npm install 很慢或者报错。如果公司网络不好可以换成国内镜像源但注意别用一些来路不明的公共镜像最好用官方推荐的 registry 配置。安装完依赖后如果启动时提示版本冲突多半是 Node 版本太旧建议用 nvm 管理 Node 版本切到 LTS 版本再试。3.2 路由规划创建页面、配置路由、传参和守卫Vue Router 是单页应用的核心。所谓单页应用就是只有一个 HTML 页面靠 JavaScript 动态切换视图。路由的职责就是维护“URL 和组件的映射关系”。先看一个最小配置import { createRouter, createWebHistory } from vue-router import Home from ../views/HomeView.vue import About from ../views/AboutView.vue const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: Home }, { path: /about, name: about, component: About } ] }) export default router路由跳转有两种方式声明式用router-link编程式用router.push。推荐优先用router-link因为它在语义上更清晰而且默认会处理激活样式。如果要在逻辑里跳转用router.push({ name: detail, params: { id: 123 } })路由传参有两种主要方式query 和 params。query 会出现在 URL 问号后面适合搜索条件、筛选参数刷新后还在。params 配在路径里适合详情页 ID路径会显示成 /detail/123。不过 Vue Router 4 里用 params 传对象时刷新页面后取不到值因为 params 不会被序列化到 URL 中。我的建议需要刷新后保留的就用 query或者直接把参数放进路径。路由守卫是权限控制的重要工具。全局前置守卫 beforeEach 可以做登录校验、页面标题设置、埋点统计。比如router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next({ name: login }) } else { next() } })注意 Vue Router 4 的守卫可以直接返回路由地址不一定非要调用 next()但两者不能混用新手经常在这里出错。3.3 响应式数据与新 API 实战reactive、ref、computed 的正确用法在组合式 API 里声明响应式数据主要靠 ref 和 reactive。ref 适合基本类型和单独的值reactive 适合对象和数组。但实际用起来我推荐一个简单原则能用 ref 就用 ref。为什么因为 ref 在模板里不需要 .value在 JavaScript 里需要 .value这种“显式拆包”反而让代码清晰而且 ref 可以赋值整个对象reactive 如果直接替换整个响应式对象会丢失响应式得用 Object.assign 逐字段覆盖。看看实战写法import { ref, computed, watch } from vue const keyword ref() const page ref(1) const pageSize ref(20) const list ref([]) const loading ref(false) const total ref(0) const hasMore computed(() list.value.length total.value) async function fetchList() { loading.value true try { const res await api.getList({ keyword: keyword.value, page: page.value, pageSize: pageSize.value }) list.value res.list total.value res.total } finally { loading.value false } } watch(keyword, () { page.value 1 fetchList() })这段代码覆盖了最常见的列表页场景搜索、分页、计算属性。注意 watch 的时机keyword 每次变化后重置 page 再请求能避免翻到第 3 页后改变搜索词还停留在第 3 页的 bug。3.4 使用 devtools 调试响应式数据和路由状态一目了然Vue 官方提供的 Vue Devtools 插件是调试必需品。它能直观看到组件树、每个组件的 props、data、computed、setup 状态还能查看 Vuex/Pinia 的状态变化以及路由跳转的痕迹。安装方面浏览器扩展商店直接搜 Vue.js devtools 安装即可。安装后在 Vue 3 项目里会自动识别。打开开发者工具切到 Vue 面板能看到组件树。点击任意组件右侧会显示它的 props、state、computed。还有 timeline 面板可以录制并查看组件更新、路由切换、store 变更等事件排查性能问题时特别有用。如果你遇到页面状态不对第一件事不是 console.log而是打开 devtools 看组件状态。这比自己瞎猜快得多。另一个调试小技巧在代码里临时加日志时用console.log(xxx, value)时注意 value 是 ref 还是普通值。组合式 API 里打印 ref 会看到 RefImpl 对象想打印值要写 .value。这也是很多新手认为“响应式失效”的常见原因其实只是打日志的方式不对。3.5 环境变量与前后端分离联调.env 文件怎么用前后端分离项目里前端开发环境、测试环境、生产环境的接口地址通常不一样。Vue 通过环境变量文件管理这些配置。在项目根目录创建 .env.development 和 .env.production格式如下VITE_API_BASE_URL/api VITE_APP_TITLE开发环境注意变量名必须以 VITE_ 开头Vue 才会把它暴露给客户端代码。在代码里用 import.meta.env.VITE_API_BASE_URL 取用。如果 .env.development 里要根据当前环境写判断条件可以用import.meta.env.DEV、import.meta.env.PROD、import.meta.env.MODE来判断。比如const isDev import.meta.env.DEV很多项目用 vite.config.js 里的 proxy 做开发代理来解决跨域问题。比如后端接口在 http://localhost:8080前端跑在 5173直接在 vite.config.js 里配server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } }这样前端请求 /api/user/list会被代理到 http://localhost:8080/user/list绕开了跨域限制。要注意的是这个代理只在开发环境生效生产环境需要由 Nginx 或其他网关来做类似转发。3.6 项目部署Vite 构建产物与后端集成前端开发完要部署。Vite 项目执行npm run build后会在 dist 目录生成静态文件。你只需要把 dist 里的文件丢到任意静态服务器即可。但前后端分离项目经常遇到一个问题后端是 Spring Boot 或者 Go Gin 之类的服务前端 dist 如何和它合并部署两个思路。第一个是“完全分离部署”前端静态资源放 Nginx后端接口独立服务通过域名或 /api 前缀区分。第二个是“合并部署”把 dist 放到后端服务的静态资源目录后端同时提供页面和接口。合并部署的好处是省一台服务器缺点是如果前端更新频繁需要同时发布后端。以 Go Gin 为例可以用 embed 或者直接指定静态目录r.Static(/assets, ./dist/assets) r.StaticFile(/, ./dist/index.html)但这里有个坑单页应用的路由模式如果是 history直接刷新 /about 页面后端找不到对应资源会 404。解决办法是后端把所有非 API 路由都 fallback 到 index.html。Spring Boot 也可以类似处理或者用 Nginx 的 try_files 指令try_files $uri $uri/ /index.html;。不处理这个刷新就白屏是非常经典的生产问题。4. 常见问题与排查技巧实录4.1 新建项目启动卡住不动copyplugin 进度停在 98%很多人用 Vue 的旧模板或者老版本脚手架时npm run dev启动到 98% 就卡住不动了控制台显示 “98% after emitting CopyPlugin”。这通常是构建插件或系统环境的兼容问题。排查思路先看是不是版本太旧老模板里用 Webpack 的 CopyPlugin 在某些 Node 版本下会卡住。解决办法是不要手动改直接用最新版npm create vuelatest生成项目。如果你的项目已经旧了试着更新依赖或者删掉 node_modules 和 lock 文件重新 install。还有一个常见原因杀毒软件实时扫描 node_modules导致文件监听和复制卡住。把项目目录加入杀毒软件白名单或者暂时关闭实时防护再启动试试。如果卡在 98% 而且是一个很老的项目最快的方式是迁移到 Vite。4.2 Maximum call stack size exceeded递归渲染或者响应式死循环报错RangeError: Maximum call stack size exceeded通常有三种原因。最常见的场景是组件自我引用导致无限递归。比如树形组件递归渲染子节点但组件名写错导致同一组件无限加载自己。检查一下模板里的递归组件是否缺少终止条件。第二种是 watch 或 computed 内部无意中修改了自身依赖导致无限循环。比如 watch 一个对象然后在回调里又修改了对象的另一个字段触发 watch 再次执行最终栈溢出。第三种是生命周期钩子里调用了一个最终会触发自身全部卸载重载的方法形成循环。排查时用 devtools 的 performance 界面看调用栈或者用二分法注释掉可疑代码定位到具体模块。4.3 Unknown custom element: 组件没有注册或拼写错误报错Unknown custom element: el-carousel-item - did you register the component correctly?意思是模板里用了未注册的组件。新手最常见的原因Element Plus 组件是按需引入的你只全局引入了 ElCarousel但没引入 ElCarouselItem。解决办法是全量引入import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)或者按需引入并确保每个子组件都注册。另一个原因是组件名拼写错误比如 Element Plus 的组件名是el-carousel-item写成el-carouselItem就识别不了。还有人是自定义组件忘了在 script 中 import 和注册在setup语法糖里只要导入就会被自动注册但如果用的是普通 script 导出组件对象就必须手动注册。4.4 Vue 项目如何做 SEO服务端渲染还是预渲染单页应用对 SEO 不友好因为搜索引擎爬虫抓到的 HTML 是空壳。Vue 项目想解决 SEO有几条路。最简单的方案是预渲染 prerender。它会在构建的时候模拟浏览器把页面渲染成静态 HTML适合页面数量少、内容不太变化的官网。具体可以用 vite-plugin-prerender 之类的插件。如果页面数量大、内容实时变化就得考虑 SSR 服务端渲染官方方案是 Nuxt。Nuxt 在服务端渲染完成后输出完整 HTML爬虫能直接拿到内容这也是现在 Vue 生态里做 SEO 项目的主流选择。还有一条折中路线独立搭建一个内容静态站点再把 Vue 应用的入口链接放进去。核心内容用静态 HTML 提供复杂交互的部分嵌入 Vue 应用。这个方案适合内容很多但交互不太复杂的官网。4.5 HBuilderX 运行 Vue 项目到手机或模拟器有些朋友习惯用 HBuilderX 开发跨端项目比如 uni-app但如果你拿 HBuilderX 打开一个纯 Vue 项目想运行到手机或模拟器需要理解一件事HBuilderX 本身不直接编译运行普通 Vue Web 项目它需要项目有对应的运行配置。最省事的办法是Vue Web 项目先用npm run dev启动然后手机和电脑在同一局域网手机浏览器访问电脑的局域网 IP 加端口。如果手机访问不到多半是防火墙拦截或者 Vite 默认只绑定了 localhost需要在 vite.config.js 里加server: { host: true }这样 Vite 会监听所有网卡地址手机上就能访问了。如果你的目标是打包成 App建议直接把项目迁移到 uni-app 生态或者用 Capacitor 壳子把 Web 页面包成原生应用。4.6 M3U8 视频流在 Vue 项目里怎么播放M3U8 是 HLS 视频流常见的索引文件格式浏览器原生 video 标签不支持需要引入 hls.js 来解析播放。在 Vue 里封装一个视频播放组件核心思路是拿到视频地址后判断浏览器是否支持 HLS不支持就降级到 hls.js。使用 hls.js 时注意几个问题第一开发环境跨域需要后端或代理配合第二视频流地址如果是相对路径或需要特殊鉴权需要在请求时加 http 头Hls.js 支持配置 xhrSetup 来做鉴权第三组件卸载时要调用 destroy 方法释放资源否则频繁切换页面会出问题。鉴权场景下建议先通过后端接口获取带时效的播放地址再把地址传给播放组件。4.7 Vue 项目里做全选、表格滚动加载、远程搜索列表页有几个高频交互需要记一下。全选按钮和勾选状态联动本质是一个计算属性。全选的勾选状态等于“所有选中项是否等于全部项”部分选中状态则是“选中项数大于 0 且小于总数”。把这两个状态定义成 computed把点击全选的事件处理写成要么全选要么清空。Element Plus 的 el-table 有个 toggleRowSelection 方法配合 selection change 事件可以实现。下拉框远程搜索加滚动加载更多一般思路是监听 el-select 的远程搜索方法在输入变化后请求第一页滚动到底部时判断 hasMore如果还有下一页则请求下一页并追加到列表。注意 debounce 防抖避免每次输入都发请求。这个模式建议封装成一个 composable通用性很强项目里多个下拉框都能复用。5. 进阶建议从“会用”到“会设计”的几条经验5.1 把“响应式”当作系统的核心约束来思考学了这一章你会发现Vue 的一切都围绕“响应式数据”运转。写组件的时候先想清楚哪些数据是状态、哪些是派生值、哪些是副作用而不是一上来就 data 写满。我会在每次写代码之前问自己三个问题这个变量是源头数据还是可以计算出来的这个变更应该由用户操作触发还是由其他数据变化自动产生这个操作是同步的派生逻辑还是异步的请求/订阅回答完这三个问题方案基本就定了源头数据用 ref/reactive派生值用 computed副作用用 watch 或事件。这个思考方式比背 API 重要得多。5.2 项目里遇到问题先从依赖版本和环境查起很多 Vue 问题最后查到根上不是代码写错了而是依赖版本不对、环境变量没生效、Node 版本太旧。我的建议是遇到问题时先确认当前项目的 package.json 版本与官方文档的示例版本一致再确认 Node 版本和包管理器版本。Vue 3、Vite、Element Plus、Vue Router 4 这几个核心依赖版本之间是有配合要求的混用旧版容易出奇怪的问题。还有一个小技巧遇到报错不要只看最后一行往上翻几行看调用的上下文。浏览器控制台会显示是哪个组件的哪个生命周期抛出的异常这个信息比报错信息本身更有用。5.3 实战中培养“最小复现”能力你问别人问题的时候如果甩出一坨几百行的代码大概率没人愿意看。真正高效的提问方式是做一个最小复现把问题剥离到一个尽量小的 demo 里只保留触发 bug 的代码。这不仅是方便别人更是方便自己。我在排查 bug 时经常发现当我把问题缩小到最小复现的过程里自己就已经找到答案了。因为剔除无关代码的过程就是理清代码逻辑的过程。5.4 把官方文档当成“字典”而非“教程”最后分享一个我坚持了很久的习惯学习 Vue 别只靠刷视频和教程官方文档才是信息密度最高、最权威的资料。教程告诉你“怎么做”文档告诉你“为什么这么设计”尤其是 Vue 3 文档里的 Reactivity in Depth 和 Rendering Mechanism 这两章读完能让你的框架认知上一个台阶。但文档不适合一开始就从头读到尾。当作字典用遇到疑难问题查具体条目配合实际的代码调试效率最高。这一章的内容到这里知识点不少但核心主线只有一条理解 Vue 怎么把数据和界面绑定起来你就会知道调试时该看哪里。下一章我会挑一个完整的项目实战把这些知识串起来从头撸一遍到时候你在第三章里踩过的所有坑都会变成实战里的解题经验。