Vue 3 面试题集

基础概念

1. Vue 3 相比 Vue 2 有哪些重大变化？

答案：

• 性能提升：Vue 3 重写了虚拟 DOM 实现，渲染性能提升约 1.3~2 倍，内存占用减少约 50%
• Composition API：新增组合式 API，提供更灵活的逻辑组织和复用方式
• TypeScript 支持：Vue 3 是用 TypeScript 重写的，提供了更好的类型推断
• Teleport 组件：允许将组件的内容传送到 DOM 的其他位置
• Fragments：组件可以有多个根节点
• Suspense：处理异步组件的新特性
• 响应式系统升级：使用 ES6 的 Proxy 代替 Object.defineProperty，解决了 Vue 2 中的数组和对象响应式问题
• 全局 API 改为应用实例调用：减少了全局污染
• 更好的 Tree-shaking 支持：减小打包体积

目录结构

Vue 3的源码采用monorepo的方式组织，使用pnpm进行包管理，主要包含以下核心模块：

• reactivity: 响应式系统
• runtime-core: 与平台无关的运行时核心
• runtime-dom: 浏览器平台特定的运行时
• compiler-core: 与平台无关的编译器核心
• compiler-dom: 浏览器平台特定的编译器实现
• compiler-sfc: 单文件组件(.vue文件)编译器
• shared: 共享工具函数
• vue: 完整版本，包含运行时和编译器

适配问题

react相关问题

网络问题

性能问题

兼容性问题

工程化问题

安全问题

移动端适配问题。

createElement 和 cloneElement 有什么区别？

传入的第一个参数不同

React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。

它接受三个参数，第一个参数可以是一个标签名。如 div、span，或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数，皆作为组件的子组件。

1

React.createElement(type, [props], [...children]);

React.cloneElement()与 React.createElement()相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件。新添加的属性会并入原有的属性，传入到返回的新元素中，而旧的子元素将被替换。将保留原始元素的键和引用。

1

React.cloneElement(element, [props], [...children]);

JavaScript 基础

1. 解释 JavaScript 中的原型和原型链

答案：
JavaScript 中的每个对象都有一个原型（prototype），原型也是一个对象，对象可以从原型继承属性和方法。

• 原型：每个函数都有一个 prototype 属性，指向一个对象，这个对象就是该函数的实例的原型
• 原型链：当访问一个对象的属性时，如果对象本身没有这个属性，JavaScript 会沿着原型链向上查找，直到找到该属性或到达原型链的末端（null）

1、react 父组件怎么调用子组件的方法

‌函数组件使用 forwardRef+useImperativeHandle‌：子组件通过useImperativeHandle暴露方法，父组件通过ref调用