vue3.01.vue3.0响应式Proxy对比Vue2.0 definePropertyProxy代理整个对象优势监听对象新增/删除属性监听数组下标、length修改支持Map/Set 等复杂数据类型Reflect配合捕获操作弥补defineProperty缺陷2.Options API vs Composition APIoptions API选项式代码分散大型项目难维护Composition API (setup)逻辑按功能聚合复用性强TS友好3.setup 执行时机、参数执行在beforeCreate之前无this参数props响应式父传过来的属性不能解构会丢失响应式要解构用toRefs(props)、context({emit,attr,slot,expose})4.ref/reactive区别ref基础类型返回Reflmpl对象.value访问也可存对象模板使用不用写.valuereactive仅对象/数组Proxy代理无需.value不能直接整体重新赋值会丢失响应式 ref内部封装reactive5.toRefs/toRefstoRef单独提取对象一个属性保持响应式toRefs批量解构对象所有属性解构后不丢失响应式6.toRaw/markRawtoRaw拿到代理对象的原始普通对象脱离Proxy代理markRaw标记对象永远不做响应式代理7.Vue3.0 生命周期组合式APIonBeforeMount / onMountedonBeforUpdate / onUpdatedonBeforeUnmount / onUnmountedonActivated / onDeactivatedkeep-alive8.Vue3.0性能优化Proxy 响应式初始化不用递归遍历全部对象惰性代理用到才代理PatchFlags编译优化模板编译时给 VNode 打补丁标记diff 跳过静态节点只对比动态内容。静态提升静态节点提升到渲染函数外面不会每次渲染重新创建 VNode。最长递增子序列 diff减少 DOM 移动。Tree‑shakingAPI 函数按需导入打包体积更小。9.computed watch watchEffectcomputed有缓存依赖不变不重新执行返回 ref 对象。watch监听指定数据源变化执行回调需要明确指定监听源。可以监听 ref、reactive、getter 函数。watchEffectVue3 独有自动收集依赖不用手动指定监听源立即执行。watch vs watchEffectwatch要明确监听源可以拿到新旧值默认不立即执行。watchEffect自动收集依赖没有 oldVal默认立即执行侧重副作用。10.组件通信父子父传子defineProps子传父defineEmits双向v-modelVue3 支持多 v-model模板 refdefineExpose子组件暴露属性给父组件 ref 访问。跨层级provide / inject默认非响应式想要响应式传 ref/reactive。兄弟 / 全局状态Pinia官方简单事件mitt替代 EventBus11.内置组件Teleport传送门把模板 DOM 渲染到组件 DOM 树之外body 下弹窗、浮层Suspense处理异步组件等待异步组件加载显示 fallback 占位。Fragment模板允许多根节点不再必须一个根 div底层生成 Fragment 虚拟节点。12.Pinia 要点移除 mutationsactions 支持同步 异步多个独立 store不用 modules、namespaceTS 原生友好自动推导类型store 之间可以直接 import 互相调用插件pinia‑plugin‑persistedstate 做持久化
