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

却说中平元年,黄巾大乱,页面失序,交互崩坏。时有涿郡涿县义士刘备字玄德,胸怀仁道,常叹 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,吕布持双向绑定搦战》

相关推荐
qczg_wxg33 分钟前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz2 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码2 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v2 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山3 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南
webYin3 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip3 小时前
结合Worker通知应用更新
前端·javascript
叶玳言3 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳3 小时前
HTML 基本结构
前端
Gazer_S3 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js