📗 Vue3 方向
共 24 道题目
如何理解 Vue 3 的响应式系统？Vue3 使用基于 Proxy 更快了吗？
核心：reactive/readonly/ref/computed/watch/watchEffect + effect 依赖收集 + trigger 通知更新。Proxy 懒代理：访问属性时才做拦截，初始化更快，天然支持嵌套对象 & 数组的响应式。
什么是 Suspense 组件？它是如何实现的？
专门用来等待异步依赖（异步组件 / async setup）的"占位壳"。子树中有返回 Promise 的组件时，先渲染 fallback 插槽，待全部 resolve 后渲染 default。
在 Vue 3 中，ref 和 reactive 有何区别？
ref：包一份"值"，典型用于基本类型；访问要 .value，可以整体重新赋值。reactive：包"对象/数组"，通过 Proxy 深度代理内部属性；不能直接给整个变量重新赋值。
Vue 3 如何实现组件的懒加载？
使用：defineAsyncComponent(() => import('./Comp.vue'))。实际是把组件打成独立 chunk，真正渲染到它时才触发动态 import。
setup 函数在组件生命周期的哪个阶段执行？
执行时机：组件实例创建后、beforeCreate 和 created 之间（实际上取代了它们）。此时 props 已解析，但没有可用的 this。
Vue 3 中的 emit 是如何实现的？
子组件调用 emit('event', payload)。组件实例内部维护一个事件名 → 监听函数列表的映射，emit 时按顺序执行这些回调。
Vue 3 的编译器和运行时是如何分离的？
编译器：构建阶段把 template 编成 render 函数，做静态提升等优化。运行时：只包含响应式、虚拟 DOM、组件生命周期等逻辑，不带编译器，体积更小。
Vue 3 是如何处理异步更新队列的？
状态变化时不立刻更新 DOM，而是把相关副作用/组件放入队列并打标为"脏"。使用微任务在同一 tick 批量 flush 队列。
Vue 3 的模板是如何编译的？
1. 解析（parse）：template → AST。2. 优化（optimize）：标记静态节点/静态子树。3. 代码生成（codegen）：AST → render 函数。
Vue 3 的 watch 和 watchEffect 有何区别？
watch：显式指定依赖，能拿到 newVal/oldVal。watchEffect：不写依赖，自动收集，无法直接拿 oldVal，更适合简单的声明式副作用。
Vue 3 的响应式系统和 React Hooks 相比有何优势？
细粒度追踪：属性级依赖，通常不需要 useMemo/useCallback。深度响应式天然支持。逻辑组织按"功能"而非生命周期。
Vue 3 是如何实现条件渲染的？
编译阶段：把 v-if/v-else-if/v-else 转为 render 函数中的条件表达式。运行阶段：依赖变化 → 重新执行 render → 生成对应分支的 VNode。
Vue 3 的 computed 是如何实现的？
本质是一个带缓存（lazy）的 effect：首次访问或依赖变化时才执行 getter。内部用 dirty 标记 + 缓存值：依赖触发时只把 dirty 设为 true；下次访问时才重新计算。
如何理解 Vue 3 中的 SSR（服务器端渲染）？
在服务端执行同一套 Vue 组件树，生成 HTML 字符串返回给浏览器。客户端再对这份 HTML 做 hydrate，只绑定事件和补差异，而不是完全重渲染。
Vue 3 的 nextTick 是如何实现的？
把回调放进一个"DOM 更新后再执行"的队列。队列依赖微任务（优先用 Promise.then），保证调用时所有同步状态更新和 DOM patch 已完成。
Vue 3 中的 shallowReactive 和 shallowRef 有何用途？
两者都只对"第一层"做响应式，内部嵌套对象原样保留为非响应式。适用场景：大对象/大数组、第三方实例等，减轻性能和行为上的风险。
Vue 3 中的 Transition 组件是如何工作的？
配合 v-if/v-show/动态组件，在元素进出时自动添加/移除一组过渡 class。默认 class：v-enter-from/active/to、v-leave-from/active/to。
v-model 的双向数据绑定是如何实现的？
本质是 :value + @input 的语法糖。自定义组件默认用 modelValue prop + update:modelValue 事件。
Vue 3 中父组件与子组件如何通信？
父→子：props 传数据/函数。子→父：emit 事件。其它：插槽、ref 拿子实例、provide/inject 跨层、全局状态（Pinia）等。
如何理解 Vue 3 中的 provide 和 inject？如何实现的？
祖先组件调用 provide(key, value) 暴露数据。任意后代组件用 inject(key) 获取；Vue 内部沿组件树向上查找最近一次 provide。
Vue 3 中，什么是 Custom Renderer API？
通过 createRenderer(hostConfig) 自定义"宿主环境"的一套 DOM 操作接口。可把 Vue 渲染到非 DOM 目标：如 Canvas、WebGL、Native 等。
Vue 3.0 采用的 Composition API 与 Vue 2.x 的 Options API 有什么不同？
组织方式：Composition API 在 setup 中按"功能块"组织；Options API 按 data/methods/computed 分散。逻辑复用：Composition API 用组合函数；Options API 用 mixin。TypeScript 支持：Composition API 更友好。
Vue 3.0 性能提升主要体现在哪里？
Proxy 响应式更快、更少边界问题。编译优化：静态提升、Patch Flag、更好的 diff。更小体积：按模块拆分 + tree-shaking。更优渲染：Fragment、Teleport、更高效的事件处理。
详细阐述 Vue 3 的 DOM diff 原理？
触发更新时新旧 VNode 树对比，只找差异部分。子节点 diff：先从两端向中间比，用 key 建立映射，求最长递增子序列(LIS)确定稳定节点，其余节点从后往前插入/移动。