第一章　桃园灯火初燃，响应义旗始揭

却说中平元年，黄巾大乱，页面失序，交互崩坏。时有涿郡涿县义士刘备字玄德，胸怀仁道，常叹 DOM 操作之繁；关羽字云长，力能扛鼎，恨 reflow 之劳形；张飞字翼德，声若巨雷，苦 repaint 之伤神。三人心念苍生，俱欲收拾旧山河，重整乾坤之渲染。

是夜，桃园深处，月色如银。三人焚香再拜，誓以 Vue 3 为号，举响应式义旗。刘备执defineReactive为剑，关羽握ref作刀，张飞抡reactive成矛。金兰结义，共立宏愿：

"自此以后，凡我兄弟，同写单文件组件，同守 Composition API，同赴前端沙场，生死与共，不可背弃！"

誓毕，刘备展卷，出一物示二人，乃《setup()》秘策一卷。卷首云：

"夫响应之道，先立 state，后衍 effect；state 者，民生之本，effect 者，治世之干。"

关羽、张飞拜受，顿首再拜。于是三英于桃园之中，点燃第一簇数据之火------

ts 复制代码

// 桃园结义·state.ts
import { reactive } from 'vue'

export const peachGarden = reactive({
  brothers: ['刘备', '关羽', '张飞'],
  oath: '上报国家，下安黎庶，同生共死，永不背义'
})

火光照处，页面微颤，旧日静态之 HTML 忽生涟漪。张飞惊曰："异哉！我但改一字，视图即随动，莫非天命？"

刘备笑曰："非天命也，Proxy 之力耳。凡入reactive者，皆录于 WeakMap，牵一发而动全身，此即'响应'二字真谛！"

关羽抚髯而思："既有响应之兵，尚缺调度之帅。来日当筑effect营寨，使数据之兵随帅旗而行，无令散乱。"

三人言谈未尽，忽闻远处鼓角之声------黄巾残党jQuery余孽，正聚众欲复辟直接操作 DOM 之旧制。刘备拔剑而起："兄弟，随我出村，初试响应锋芒！"

于是桃园灯火未灭，三骑已扬尘而去。前端乱世，自此拉开序幕。后人有诗赞曰：

桃园一火照前端，

Proxy 初开响应天。

自此 DOM 随令转，

三分代码见真源。

（第一章完）

------下回《虎牢关前初试Composition，吕布持双向绑定搦战》

第一章 桃园灯火初燃，响应义旗始揭

第一章　桃园灯火初燃，响应义旗始揭