组合式 API
Vue 3 的代码组织方式叫组合式 API（Composition API），入口是 <script setup>。核心三件套：ref（响应式数据）、computed（计算属性：依赖变了自动重算，且会缓存结果）、watch（侦听器：数据变化时执行副作用，如发请求、存 localStorage）。
与 Vue 2 的选项式 API（data/methods/watch 分散在各选项里）相比，组合式的优势是按功能聚合代码：同一个功能的响应式数据、计算、副作用写在相邻的几行里，还能抽成可复用的「组合函数」（composables），比如 useMouse()、useFetch()，逻辑复用比 mixins 优雅得多。
新手常见坑：computed 里放异步请求（它必须同步返回）；watch 监听对象深层的属性变化要加 { deep: true }；在 setup 里忘了 return 暴露变量，模板里就是 undefined。
本节要点ref 存数据、computed 派生并缓存、watch 做副作用；组合式按功能组织代码，可抽成 useXxx 组合函数复用。
代码
<script setup>
import { ref, computed, watch, onMounted } from 'vue';
// ref：响应式数据（JS 里用 .value）
const keyword = ref('');
const list = ref(['apple', 'banana', 'cherry']);
// computed：依赖变了自动重算，结果有缓存
const filtered = computed(() =>
list.value.filter((item) => item.includes(keyword.value))
);
// watch：监听变化执行副作用
watch(keyword, (newVal, oldVal) => {
console.log(`关键词从 "${oldVal}" 变成 "${newVal}"`);
localStorage.setItem('keyword', newVal); // 例如同步存储
});
// 生命周期钩子（组合式写法）
onMounted(() => {
keyword.value = localStorage.getItem('keyword') || '';
});
</script>
<template>
<input v-model="keyword" placeholder="搜索">
<li v-for="item in filtered" :key="item">{{ item }}</li>
</template>
