Vue 常用技术知识全景：从响应式到组件通信的程序理解

你写 Vue 时经常会遇到这些痛点：

• 🛑 为什么模板里不用写 .value脚本里却要写？
• 🛑 为什么 computed 有缓存，而 watch 更适合处理副作用？
• 🛑 为什么子组件不能直接改父组件传来的 props？
• 🛑 当页面变得复杂时状态到底该放在哪里才不会“乱套”？

这些问题不是零散的 API，而是 Vue 响应式程序、组件模型和单向数据流在真实业务中的表现。如果能把模板编译、响应式依赖收集、组件通信、生命周期和副作用管理串起来Vue 项目会更容易拆分、调试和维护。

这篇文章面向已经会写基础 Vue 单文件组件、想程序整理 Vue 常用知识的前端开发者。示例以 Vue 3、单文件组件和 Composition API 写法为主；Options API 仍然是 Vue 支持的写法，这篇文章会在关键位置说明差异。

. Vue 的主要模型：声明式渲染 + 响应式更新

痛点：新手常把响应式对象当普通变量使用，导致 UI 不更新。

主要概念：用模板声明 UI，用响应式状态驱动 UI 更新。其实，

在

. 模板语法：表达 UI，而不是堆逻辑

痛点：#1 “模板里写太多表达式导致报错”。#2 “属性绑定忘记加冒号”。

. ref 与 reactive：响应式状态的两种常见入口

痛点：#1 “reactive 对象解构后失去响应”。#2 “不知道何时该用 ref”。

. computed：从状态派生状态

痛点：#1 “computed 不更新” #2 “误把副作用放进 computed”。

可写 computed 示例:

{{errorMessage}}
{{result}}

WatchEffect 自动追踪

"

SSR 注意 – window 不存在需要放在 onMounted 或仅客户端执行。不过，

. 生命周期 Hook

Pain Point :

. Component Communication : Props Down → Events Up

Pain Point :