1. Vue 3 变量定义与响应式系统解析
在Vue 3的Composition API中，变量定义方式直接影响组件的响应式行为。最基础的ref和reactive两种声明方式，新手常常混淆它们的使用场景。
1.1 ref与reactive的核心区别
ref通常用于基本类型数据（string/number/boolean），它通过.value属性实现响应式追踪。实际开发中，当处理简单数据时，ref的显式.value访问能更清晰地表明这是响应式数据：
javascript复制const count = ref(0)
const increment = () => {
count.value++ // 必须通过.value修改
}
reactive则适用于对象类型数据，它会深度转换所有属性为响应式。在管理复杂状态对象时，reactive的嵌套属性自动解包特性更符合直觉：
javascript复制const user = reactive({
name: 'Alice',
profile: {
age: 25 // 嵌套对象自动响应式
}
})
关键经验：当数据结构层级超过3层时，建议改用reactive避免.value链式调用带来的代码冗余
1.2 响应式丢失的典型场景
通过解构赋值直接获取reactive对象的属性时，会破坏响应式连接。这是实际项目中最常见的问题之一：
javascript复制const state = reactive({ x: 1, y: 2 })
const { x } = state // x失去响应性
// 正确做法
const x = toRef(state, 'x') // 保持响应性
在组合函数返回响应式对象时，如果直接展开...操作符也会导致响应式丢失。推荐使用toRefs进行安全转换：
javascript复制function usePosition() {
const pos = reactive({ x: 0, y: 0 })
return { ...toRefs(pos) } // 保持响应性
}
2. computed的进阶用法与性能优化
2.1 计算属性的缓存机制
computed的缓存特性是其区别于普通函数的核心优势。只有当依赖项变化时才会重新计算，这对复杂运算尤为重要：
javascript复制const expensiveValue = computed(() => {
// 假设这是耗时计算
return heavyCompute(data.value)
})
但在实际使用中，开发者常犯的错误是在计算属性内部执行副作用操作。这违反了计算属性的纯函数原则，可能导致不可预期的行为：
javascript复制// 反模式！不要在computed内执行副作用
const badComputed = computed(() => {
fetchData() // 错误用法
return someValue
})
2.2 可写计算属性的实现
通过提供get和set函数，可以创建可写的计算属性。这在处理表单双向绑定时特别有用：
javascript复制const firstName = ref('')
const lastName = ref('')
const fullName = computed({
get: () => `${firstName.value} ${lastName.value}`,
set: (newValue) => {
[firstName.value, lastName.value] = newValue.split(' ')
}
})
性能提示：当计算属性依赖项包含大型数组时，考虑使用shallowRef减少不必要的深度响应式开销
3. 方法函数与计算属性的选择策略
3.1 何时选择普通函数
符合以下特征时应该使用普通函数：
- 需要主动调用的行为（如事件处理）
- 不依赖响应式数据的纯工具函数
- 需要传递参数才能计算结果的情况
javascript复制// 适合普通函数的场景
const formatDate = (timestamp) => {
return new Date(timestamp).toLocaleString()
}
3.2 计算属性的适用场景
优先考虑computed当：
- 需要基于现有状态派生新数据
- 计算结果会被多次复用
- 需要自动跟踪依赖关系时
javascript复制// 更适合计算属性的场景
const discountedPrice = computed(() => {
return basePrice.value * (1 - discount.value)
})
4. 高频错误与调试技巧
4.1 异步操作中的响应式陷阱
在异步回调中直接修改响应式数据可能导致失去上下文。正确的做法是使用markRaw标记非响应式对象，或在异步操作前保存引用：
javascript复制// 危险代码
const state = reactive({ data: null })
fetchData().then(res => {
state.data = res // 可能失去响应性
})
// 安全做法
const rawData = markRaw({})
fetchData().then(res => {
Object.assign(rawData, res)
state.data = reactive(rawData)
})
4.2 依赖追踪失效的诊断
当计算属性不按预期更新时，可以通过以下步骤排查：
- 使用调试器检查getter函数是否执行
- 确认所有依赖项都是响应式的
- 检查是否有意外的条件分支跳过了依赖项
javascript复制const debugComputed = computed(() => {
// 添加调试语句
console.log('Dependencies:', effectScope().activeEffect?.deps)
return computeValue()
})
5. 组合式API的最佳实践
5.1 关注点分离的模式
将相关逻辑组织到自定义组合函数中，可以大幅提升代码可维护性。推荐按功能而非类型组织代码：
javascript复制// 用户认证相关逻辑
function useAuth() {
const user = ref(null)
const isLoggedIn = computed(() => !!user.value)
const login = async () => { /*...*/ }
return { user, isLoggedIn, login }
}
5.2 响应式状态的生命周期管理
在组件卸载时及时清理副作用，避免内存泄漏。使用effectScope可以批量管理相关效果：
javascript复制export default {
setup() {
const scope = effectScope()
scope.run(() => {
const state = reactive({ /*...*/ })
watchEffect(() => { /*...*/ })
})
onUnmounted(() => scope.stop())
}
}
6. 性能优化专项
6.1 计算属性的惰性求值
对于不总是需要使用的派生状态，可以使用computed的惰性特性延迟计算：
javascript复制const maybeExpensive = computed(() => {
if (!needed.value) return null
return heavyCompute(data.value)
})
6.2 避免响应式过度渲染
在渲染长列表时，对静态数据使用shallowRef或markRaw可以显著提升性能：
javascript复制const heavyList = shallowRef(
Array(1000).fill().map((_, i) => ({ id: i }))
)
7. TypeScript集成指南
7.1 类型安全的响应式变量
为ref和reactive提供精确的类型定义，可以获得完善的IDE支持：
typescript复制interface User {
name: string
age: number
}
const user = reactive<User>({
name: '',
age: 0
})
const count = ref<number>(0)
7.2 计算属性的类型推断
TypeScript能自动推断计算属性的返回类型，但复杂场景需要显式注解：
typescript复制const fullName = computed<string>(() => {
return `${firstName.value} ${lastName.value}`
})
8. 实战案例：购物车实现
8.1 状态建模
展示如何选择响应式类型构建购物车模型：
javascript复制const cart = reactive({
items: [],
discounts: ref([]), // 独立更新的折扣信息
get total() {
return this.items.reduce((sum, item) =>
sum + item.price * item.quantity, 0)
}
})
8.2 业务逻辑封装
将购物车操作封装为组合函数：
javascript复制function useCart() {
const cart = reactive({ /*...*/ })
const addItem = (product) => {
const existing = cart.items.find(i => i.id === product.id)
existing ? existing.quantity++ : cart.items.push({...product, quantity: 1})
}
const totalPrice = computed(() => { /*...*/ })
return { cart, addItem, totalPrice }
}