第二章　虎牢关前初试Composition，吕布持v-model搦战

上回说到桃园三英，以reactive义旗初燃响应之火。未及旬日，消息传遍十八路诸侯：董卓挟旧框架jQuery，虎踞虎牢关，其义子吕布手持方天画戟，戟上双锋刻着"v-model"二字，号称"双向绑定第一猛将"，凡与之交锋者，模板与数据顷刻错乱，士卒（开发者）叫苦不迭。诸侯震惧，聚于酸枣大营，共议破敌之策。

玄德谓关、张曰："吕布之势，在于旧双向绑定蛮横：一处改值，处处牵连，调试如坠五里雾。吾等新得Vue 3利器，可趁此关试其锋芒。"于是三人随公孙瓒军，星夜抵虎牢关下。

翌日黎明，鼓角齐鸣。吕布匹马出阵，戟指诸侯大喝："谁敢与我斗绑定！"诸侯阵中，一将应声而出，乃江东孙坚，旧用Angular.js，被吕布一戟挑落马下，数据流当场断链。诸侯失色。

玄德回顾云长："二弟，汝可出战？"云长丹凤眼微睁，提刀而出，却非青龙偃月，而是一柄新铸长刀，名曰<script setup>。刀背暗藏三大新纹：

纹一：ref()------化普通值为响应利刃；
纹二：computed()------凝衍生数据为刀罡；
纹三：watchEffect()------布追踪暗劲，敌一动则我即知。

云长横刀立马，朗声道："吕布小儿，敢接我Composition刀法否？"

吕布大笑，挥戟直取。云长举刀迎敌，只见刀光闪处，代码如诗：

vue 复制代码

<!-- 虎牢关·关云长挑战牌.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，一矛刺出，竟将"
"元素瞬息移至关外战场中央，避开层层嵌套之DOM重围，令吕布措手不及。

玄德亦催马上前，袖中飞出一面小旗，旗上书"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》

第二章 虎牢关前初试Composition，吕布持v-model搦战

第二章　虎牢关前初试Composition，吕布持v-model搦战