Jym好😘，我是珑墨。今天聊聊 Vue3 常见坑点和使用技巧嘎嘎的😍，看下面。

一、响应式程序全景剖析

. ref、reactive、shallowRef、shallowReactive、readonly、markRaw

• ref：适合基本类型，也可包裹对象。对象时模板自动解包，JS 里需 .value。
• reactive：适合对象和数组，不能包裹基本类型。
• shallowRef / shallowReactive：只对第一层做响应式，深层属性变动不会触发更新。适合大对象、性能敏感场景。

常见痛点：在大型数据结构上误用 reactive 导致深度追踪卡顿。说起来，

// shallowRef 与 shallowReactive
import { shallowRef。shallowReactive } from 'vue';const obj = shallowRef;obj.value.a = 2;// 不会触发响应式更新，只有 obj.value = 新对象 才会触发
const arr = shallowReactive;arr.a = 2，// 不会触发响应式更新。只有 arr = 新对象 才会触发

• readonly：只读响应式，防止数据被修改。注意只读是浅层的，

import { reactive,readonly } from 'vue';怎么说呢，const state = reactive;const roState = readonly;roState.count++;// 警告：只读属性不能修改

• markRaw：标记对象为“永远不响应式”，适合第三方库实例、DOM 节点等。

import { markRaw,reactive } from 'vue';const dom = markRaw);const state = reactive;// dom 不会被代理

常见坑：

• reactive 不能嵌套 ref，会丢失响应性。
• shallowRef 适合大对象频繁整体替换，避免深层追踪性能损耗。
• readonly 的只读限制是浅层的，深层对象仍可被修改。
• markRaw 后对象彻底不响应式，慎用。怎么说呢，

state.foo = {};// foo 变成普通值，响应性丢失

. 响应式丢失的场景

• 解构 reactive 对象属性导致响应性丢失。

// 用 toRefs / toRef 保持响应性
import { reactive,toRefs } from 'vue';const state = reactive;const { count } = state;// count 此时不是响应式的
const { count: reactiveCount } = toRefs;// 正确：reactiveCount 是响应式的

• 直接赋值替换 reactive 对象导致响应性丢失。 不过，

// 错误写法
import { reactive } from 'vue';let state = reactive;说起来，state = { a: 2 };// 此时 state 已不是响应式
// 正确写法：用 ref 包裹整个对象
import { ref } from 'vue';按理说，const state = ref;state.value = { a: 2 };// 响应式仍然生效

• Object.assign、Array.prototype.map 等方法操作后可能导致部分属性失去代理。
• 将响应式对象传递给第三方库前。需要先脱壳，否则 Proxy 会被破坏。

// 使用 toRaw 脱壳传递给第三方库
import { reactive,toRaw } from 'vue';const state = reactive;thirdPartyLib);// 确保传递的是原始对象

. Proxy 限制与注意事项

• 不能 代理已经是 Proxy 的对象。怎么说呢，
• 不能代理 DOM 节点、class 实例。还有 Symbol 属性。

// 示例：错误尝试代理 DOM 节点
reactive);// 不会生效，也不会报错。只是直接返回原始节点

二、组合式 API 的“易混点”

. setup 的参数和返回值

export default {
setup {
// props → 响应式的 props
// emit → 用于触发自定义事件
// slots → 插槽内容访问器
// attrs → 未声明的属性集合
// expose → 暴露给父组件的方法或属性
return {
// 返回的属性会暴露给模板使用
};// 注意：返回渲染函数时模板将失效；
老实说，setup 中没有 this。
说起来，}
}

Pain Point：If you try to use `this` inside `setup`。you'll get `

. defineProps、defineEmits、defineExpose、defineOptions

• `defineProps` 与 `defineEmits` 必须在 `

  Pain Point：If you accidentally write `export default` inside `