⚡ 30 秒速记

核心判断：虚拟节点是对界面结构的描述，渲染器通过挂载与更新把声明式描述映射为宿主环境操作
原理主线：围绕「组件化」、「组件通信常用方式」、「插槽」建立输入、状态变化与输出之间的因果关系
文章范围：系统介绍了Vue组件化开发的原理与实践，包括组件化的优势、常用的组件通信方式（如props、自定义事件、事件总线等），帮助开发者高效构建可维护、可复用的Vue大型应用。
边界与代价：key、节点类型和稳定序列决定复用边界；虚拟 DOM 解决可预测更新，不保证永远比手写 DOM 快
工程落地：性能分析要看实际提交次数、节点移动和组件边界，不能只用“减少 DOM 操作”解释

Vue 组件化的本质，是把界面拆成可独立描述和更新的组件，再由渲染器将组件产生的虚拟节点映射到宿主环境。 组件渲染时先得到 VNode，首次进入挂载流程，状态变化后则生成新 VNode，通过更新比较把必要变更落到真实 DOM。这样业务代码关注组件状态和界面声明，不必直接维护每一步节点操作。需要注意版本边界：涉及 Object.defineProperty、Dep、Watcher 或双端 Diff 的解释主要属于 Vue 2，Vue 3 使用新的响应式与渲染器路径。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明制定迁移与安全策略。

# vue组件化实践

# 组件化

vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发。

# 组件通信常用方式

# 1. props

父给子传值

 
// child
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>

# 2. 自定义事件

子给父传值

  
// child this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>