登录
第二章 虎牢关前初试Composition，吕布持v-model搦战
上回说到桃园三英，以reactive义旗初燃响应之火。未及旬日，消息传遍十八路诸侯：董卓挟旧框架jQuery，虎踞虎牢关，其义子吕布手持方天画戟，戟上双锋刻着“v-model”二字，号称“双向绑定第一猛将”，凡与之交锋者，模板与数据顷刻错乱，士卒（开发者）叫苦不迭。诸侯震惧，聚于酸枣大营，共议破敌之策。
玄德谓关、张曰：“吕布之势，在于旧双向绑定蛮横：一处改值，处处牵连，调试如坠五里雾。吾等新得Vue 3利器，可趁此关试其锋芒。”于是三人随公孙瓒军，星夜抵虎牢关下。
翌日黎明，鼓角齐鸣。吕布匹马出阵，戟指诸侯大喝：“谁敢与我斗绑定！”诸侯阵中，一将应声而出，乃江东孙坚，旧用Angular.js，被吕布一戟挑落马下，数据流当场断链。诸侯失色。
玄德回顾云长：“二弟，汝可出战？”云长丹凤眼微睁，提刀而出，却非青龙偃月，而是一柄新铸长刀，名曰<script setup>。刀背暗藏三大新纹：
- 纹一：
ref()——化普通值为响应利刃； - 纹二：
computed()——凝衍生数据为刀罡； - 纹三：
watchEffect()——布追踪暗劲，敌一动则我即知。
云长横刀立马，朗声道：“吕布小儿，敢接我Composition刀法否？”
吕布大笑，挥戟直取。云长举刀迎敌，只见刀光闪处，代码如诗：
<!-- 虎牢关·关云长挑战牌.vue -->
<script setup lang="ts">
import { ref, computed, watchEffect } from 'vue'
const luBuHP = ref(100) // 吕布血条
const guanYuATK = ref(30) // 关羽攻击
const isCritical = computed(() => luBuHP.value < 50)
watchEffect(() => {
if (isCritical.value) console.warn('吕布进入红血，狂暴模式开启！')
})
</script>
<template>
<div>
<p>吕布剩余血量：{{ luBuHP }}</p>
<button @click="luBuHP -= guanYuATK">青龙斩</button>
</div>
</template>
刀戟相交，吕布顿觉旧法迟钝：每次v-model改动，需层层触发$digest，而云长刀法轻灵，仅在必要处精准更新，DOM重绘大减。三十合后，吕布戟法渐乱。
翼德见云长占上风，大吼一声，挺矛跃马而出。其矛名Teleport，一矛刺出，竟将“
玄德亦催马上前，袖中飞出一面小旗，旗上书“Suspense”。旗展处，诸侯军阵忽现异步大军：先遣async setup()轻骑诱敌，随后<Suspense>大军稳压阵脚，待数据从远域（API）归来，三军齐发，吕布旧部顿时崩溃。
吕布见势不妙，拨马欲走。云长刀锋一转，大喝：“留下v-model！”刀落处，吕布戟上“双向绑定”四字应声而碎，化作漫天光屑。诸侯军乘势掩杀，虎牢关大门轰然洞开。
战后，酸枣大营庆功。曹操把盏谓玄德曰：“今日之战，方知Vue 3新特性之利：
• <script setup>简军书（样板代码减半）；
• ref & reactive分兵权（原始与对象各得其所）；
• computed与watchEffect如伏兵暗哨，料敌先机；
• Teleport奇兵突袭，解定位之困；
• Suspense则整饬异步之乱，令军容肃整。
有此五利，何愁旧框架不破？”
玄德谦逊答曰：“皆赖众志。然董卓未灭，jQuery余孽犹在，吾等当整军向西，直驱长安。”
众人齐应。夜色下，营火映照着一面新旗——旗上赫然是Vue 3的Logo，而下方绣着一行小字：
“Composition API · 破釜沉舟”
（第二章完）
——下回《凤仪亭密谋自定义ref，貂蝉夜探shallowReactive》
