第五章：响应式 —— 账本一改，招牌自动刷新

1 分钟 137 字第 75 / 962 个阅读单元

Vue 的灵魂是响应式系统。

最常见的两个入口：

ref()：包一个单值
reactive()：包一个对象

vue

<script setup lang="ts">
import { ref, reactive } from 'vue';

const districtName = ref('浦东新城区');
const shop = reactive({
  name: 'Vue 书店',
  revenue: 1200,
  open: true,
});
</script>

<template>
  <h1>{{ districtName }}</h1>
  <p>{{ shop.name }} - 今日流水 {{ shop.revenue }}</p>
  <p>{{ shop.open ? '营业中' : '已打烊' }}</p>
</template>

	`ref`	`reactive`
更适合	单值、独立状态	成组对象状态
访问方式	JS 里用 `.value`	直接点属性
模板里	自动解包	直接使用

你可以把响应式理解成：

text

店铺账本变了
   ↓
Vue 发现哪些招牌、价签、统计牌依赖它
   ↓
只刷新真正受影响的那部分界面