⚡ 30 秒速记
- 核心判断：源码会经历解析、编译与执行，执行上下文和调用栈决定变量解析、
this与函数返回的位置 - 原理主线：围绕 「组件的产出是什么」、「组件的 VNode 如何表示」、「组件的种类」 建立输入、状态变化与输出之间的因果关系
- 文章范围：解析Vue组件的本质和原理，探讨组件的产出、与模板引擎的关系，以及组件在现代前端开发中的作用，帮助读者理解Vue组件的底层实现和设计思想。
- 边界与代价：规范中的词法环境不等同于某个引擎的具体内存对象，优化编译也可能随运行反馈去优化
- 工程落地：定位提升、暂时性死区、闭包和栈溢出时，要回到词法绑定与调用栈变化解释
组件本质上是一个接收数据并产出界面描述的单元，在现代 Vue 中，这个产出通常是 VNode。 数据变化后，组件生成新的 VNode，渲染器通过 patch 对比新旧描述，再把变化映射到真实 DOM。函数式组件直接调用函数即可得到 VNode；有状态组件则要先实例化，再调用实例的 render。Virtual DOM 的主要价值是分离组件与宿主渲染过程，方便支持浏览器之外的平台和 SSR，并不等于任何场景都比直接操作 DOM 更快。
这篇文章不要按 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或React时，往往会将页面拆分为各种组件，通过拼装组件来形成页面和应用，就像搭积木一样。
那么，大家有没有思考过："组件的产出是什么？"
# 组件的产出是什么
在 JQuery 盛行的年代，比起组件，“模板引擎”的概念要更加流行。
我们可以使用 lodash.template 函数来回忆一下当年是如何用模板开发一个页面的：
import { template } from 'lodash'
const compiler = template('<h1><%= title %></h1>')
const html = compiler({ title: 'My Component' })
document.getElementById('app').innerHTML = html
模板引擎的概念是：字符串 + 数据 => html。
