Vue3.x

Vue3与Vue2响应式原理差异

Vue3采用Proxy API实现响应式系统，而Vue2基于Object.defineProperty。请从检测能力（如新增/删除属性）、数组处理、性能优化等角度对比两者的实现差异及改进意义。

Proxy替代Object.defineProperty的原因

为何Vue3放弃Object.defineProperty而全面转向Proxy？请列举Proxy在深层对象监听、数组索引修改、动态属性增删等方面的优势，并说明其对Vue响应式系统能力的提升。

reactive与ref的核心区别

解释reactive()和ref()在响应式数据类型处理上的根本差异：为何ref需要.value访问？什么情况下必须使用ref处理基本类型数据？给出两者在对象包装场景下的转换关系示例。

reactive处理基本类型的限制

尝试用reactive()创建字符串或数字类型的响应式变量会导致什么问题？Vue3的响应式系统为何强制要求reactive参数必须为对象类型？

watch与watchEffect的差异

从依赖收集方式、立即执行策略、回调参数等维度对比watch和watchEffect的行为差异。在处理多个关联状态变化时，如何选择更适合的监听器以优化性能？

Options API与Composition API架构对比

分析两种API设计范式的核心差异：为何Composition API更利于逻辑复用？举例说明基于功能组织的代码如何解决Options API在复杂组件中的碎片化问题。

组合式API常用方法解析

详细说明ref、reactive、computed、provide/inject等组合式API的核心作用。为何在异步请求场景中需特别注意ref的.value赋值时机？

script setup语法糖的优势

<script setup>如何通过编译时转换简化组件代码？分析其自动暴露变量、顶级绑定、编译器宏支持等特性对开发效率的提升作用。

组合式API生命周期变化

对比Options API的生命周期选项，说明组合式API中onMounted、onUpdated等钩子的命名规则变化，并解释beforeCreate和created在setup中的替代方案。

组合式API逻辑复用实现

如何通过自定义组合函数（composable）实现业务逻辑复用？以鼠标跟踪器或API请求为例，演示将逻辑抽取为独立函数并在多个组件中复用的完整流程。

Vue3的Tree shaking实现原理

Vue3如何通过ES模块静态分析实现Tree shaking优化？请结合编译器标记和API设计，举例说明如keep-alive等未使用功能如何被自动移除，并对比Vue2的全局API设计对此优化的阻碍。

Fragment特性的多根节点支持

Vue3的Fragment特性如何解决Vue2的模板单根限制？从虚拟DOM结构变化的角度，说明多根节点组件在patch过程中的处理方式及其对CSS布局的影响。

Teleport组件的DOM传送场景

使用Teleport组件将模态框传送到body外层时，如何避免z-index层级问题？请分析其实现原理，并说明to属性支持CSS选择器时的注意事项。

Suspense组件的异步解决方案

Suspense组件如何通过插槽机制协调异步组件加载状态？请结合fallback插槽和onErrorCaptured生命周期，说明错误边界处理与加载骨架屏的实现方案。

静态提升(Static Hoisting)优化原理

Vue3编译器如何通过标记静态节点实现hoisting优化？对比编译前后的渲染函数代码，解释该优化对虚拟DOM diff算法性能提升的具体贡献。

Vue3组件通信方式的变化

为何Vue3移除$on/$off等事件接口？从事件总线模式与响应式系统的冲突角度，说明推荐使用mitt等第三方库替代EventBus方案的设计考量。

mitt库与EventBus的核心差异

对比mitt库的发布订阅模式与Vue2的EventBus实现，说明前者在TypeScript支持、内存泄漏预防、无实例化等方面的改进设计。

Modal组件设计（组合API+Teleport）

如何利用组合式API封装模态框状态逻辑，并通过Teleport实现动态挂载？请给出遮罩层点击关闭和Esc键关闭的功能实现方案及其可复用性设计。

自定义指令API的生命周期变化

Vue3中自定义指令的生命周期钩子如何从Vue2的bind/update重命名为mounted/updated？请说明inserted钩子被合并后的新触发逻辑及参数变化。

v-if与v-for优先级变化(Vue3)

在Vue3中v-if的优先级高于v-for，这与Vue2的行为相反。请解释这种改变如何避免无效循环渲染，并给出需要同时使用时的正确写法（如外层包裹template或使用计算属性过滤数据）

v-memo指令的缓存优化作用

新增的v-memo指令如何通过记忆虚拟DOM子树提升静态内容渲染性能？请举例说明在表格行渲染场景中，如何通过指定依赖数组实现条件性跳过更新。

渲染函数h函数的导入变化

为何Vue3要求手动导入h函数而非自动全局注入？从模块化设计和Tree shaking优化的角度，说明这种改变对自定义渲染器开发的影响。

组合式API的TS类型推导改进

组合式API如何通过类型推断自动推导ref<string>等响应式变量类型？对比Options API的选项类型声明，说明在setup函数中类型提示的准确性提升。

defineProps/defineEmits类型声明

在<script setup>中如何通过泛型语法定义带类型的props和emits？请演示使用接口继承和字面量类型实现复杂类型校验的代码示例。

Vue3的IE11兼容性方案

若需在Vue3中支持IE11，需配置哪些polyfill（如Proxy/WeakMap）？解释@vue/cli构建时如何通过babel.config.js的transpileDeps选项处理依赖转换。

Vue3移除API的替代方案

列举Vue3移除的过滤器(filter)、$children等特性的官方推荐替代方案。为何事件总线模式被建议改用provide/inject或Vuex/Pinia替代？

组合式API+Teleport实现Modal

结合Teleport的to="body"属性和组合式API的状态管理，演示可复用的模态框组件实现。包括键盘事件监听、焦点管理及动画过渡的最佳实践。

组件库Tree shaking优化策略

如何通过ES模块导出、按需导入设计配合Vite的rollup打包，实现组件库的Tree shaking效果？请给出按组件目录分包构建的具体配置示例。

composition api 与 options api 的区别

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

vue3 的设计目标是什么？做了哪些优化？

Vue3.0的设计目标是什么？做了哪些优化

vue3 实现一个 Modal 组件设计思路与流程分析

用Vue3.0 写过组件吗？如果想实现一个 Modal你会怎么设计？

vue3 的性能提升主要体现在哪些方面？

Vue3.0性能提升主要是通过哪几方面体现的？

proxy api 与 defineProperty API 比较

Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？

Vue3.0中Treeshaking特性

说说Vue 3.0中Treeshaking特性？举例说明一下？