"看完这篇，别再被这些概念绕晕了！"
1. 组合式API vs 选项式API
// ❌ 选项式API（Vue2习惯）
export default {
data() { return { count: 0 } },
methods: { increment() { this.count++ } }
}
// ✅ 组合式API（Vue3推荐）
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
💡 核心区别：
- 选项式：按功能类型拆分代码（data/methods）
- 组合式：按业务逻辑聚合代码（同一功能代码在一起）
2. ref 和 reactive 到底用哪个？
const num = ref(0) // 基本类型
const user = reactive({ name: '小康' }) // 对象
// ❌ 错误用法
const list = reactive([1,2,3])
list = [...list, 4] // 失去响应式！
// ✅ 数组推荐方案
const list = ref([1,2,3])
list.value.push(4)
🔑 选择口诀：
- 基础类型用
ref - 复杂对象用
reactive - 数组操作优先
ref
3. v-if 和 v-show 性能陷阱
| v-if | v-show | |
|---|---|---|
| DOM | 条件为假时移除 | 始终渲染，display切换 |
| 开销 | 高（频繁切换慎用） | 低（适合高频切换） |
| ⏰ 使用场景： |
- 登录弹窗：用
v-if（不常出现） - Tab切换：用
v-show（频繁切换）
4. watch 和 watchEffect 监听差异
// 明确监听特定数据
watch(count, (newVal) => {
console.log('count变化:', newVal)
})
// 自动追踪回调内的响应式依赖
watchEffect(() => {
console.log('count+name:', count.value, user.name)
})
⚠️ 踩坑点：
watchEffect会立即执行一次- 在异步回调中可能无法正确追踪依赖
5. 组件通信方式选择困难症
父子组件：
props传数据 +emit触发事件
兄弟组件：EventBus（小项目） /Pinia（中大型项目）
跨层级：provide/inject（慎用，避免数据流混乱）
6. 响应式原理的Proxy魔法
// Vue2的defineProperty
Object.defineProperty(obj, 'key', {
get() {},
set() {}
})
// Vue3的Proxy
new Proxy(obj, {
get(target, key) {},
set(target, key, value) {}
})
🌟 升级优势：
- 检测数组下标修改
- 支持Map/Set等数据结构
- 性能更优
