Vue 3 响应式 API 按数据特征分层：ref 用于基础类型和需解构的变量，返回带 .value 的响应式包装器；reactive 用于嵌套对象，返回天然响应式的 Proxy；computed 专注纯派生计算并缓存；watch 处理变化后的副作用，支持防抖与清理。
Vue 3 的响应式 API 不是拼凑着用，而是按数据特征和使用场景分层组织。选对 API，代码才干净、可维护、不易出错。
ref 用于基础类型和需解构/传递的变量
字符串、数字、布尔值、单个对象引用（比如表单字段、开关状态）优先用 ref。它返回一个带 .value 的响应式包装器，JS 中必须写 .value，模板中自动解包。
- 计数器、搜索关键词、是否展开等状态 →
const count = ref(0)、const keyword = ref('') - 需要从组合函数里解构返回多个响应式值时，ref 更友好：
return { count, name, isLoading }，直接解构不会丢失响应性 - 包装对象时（如
ref({})），内部会转为 reactive，但访问仍要 .value，适合需整体替换的场景（比如整个用户配置重载）
reactive 用于嵌套结构和深层数据操作
表单对象、列表、树形结构、配置项等多层级对象或数组，统一用 reactive。它返回 Proxy 代理，所有嵌套属性天然响应式，JS 和模板中都无需 .value。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 用户信息对象：
const user = reactive({ name: '', profile: { avatar: '' } })，修改user.profile.avatar直接触发更新 - 避免直接解构 reactive 对象，否则响应性丢失；要用
toRefs(user)转成 ref 再解构 - 不能直接赋新对象：
user = { ... }会断开响应式；应改用Object.assign(user, newData)或逐个赋值
computed 专注派生值，不执行副作用
computed 是声明式计算，依赖变化时自动重新求值，结果自带缓存。它返回一个只读 ref，适合做过滤、格式化、组合等纯计算逻辑。
立即学习“前端免费学习笔记（深入）”；
- 搜索过滤：
const filteredList = computed(() => list.value.filter(item => item.name.includes(keyword.value))) - 总价计算：
const totalPrice = computed(() => cartItems.value.reduce((sum, item) => sum + item.price * item.qty, 0)) - 不要在 computed 里发请求、修改 state、调用 DOM 方法——那是 watch 或事件处理的事
watch 处理变化后的动作，支持防抖与清理
watch 是命令式监听，适合响应数据变化执行副作用：API 请求、路由跳转、本地存储、第三方库同步等。
- 监听单个 ref：
watch(keyword, (newVal) => api.search(newVal), { debounce: 300 }) - 监听 reactive 对象的某个字段：
watch(() => user.name, (newName) => console.log('name changed')) - 监听多个来源或执行清理：
watch([count, keyword], ([c, k]) => {...}, { immediate: true })；回调返回清理函数可取消异步操作
