vue3面试题及答案2023_vue30道面试题

Vue3 面试题（2023-09-26更新）

Vue3 对比 Vue2 做了那些改进？

1. 响应式系统

vue2 中使用的 Object.defineProperty 实现的响应式，劫持整个对象，递归遍历所有属性，给每个属性添加 getter 和 setter
vue3 中使用的 Proxy 实现的响应式

2. 编译阶段

Fragment

Vue3 增加了一个抽象组件，本身不会被渲染到 DOM 中。主要的作用是：模板里面不再需要创建唯一根节点。可以直接放同级标签

静态节点提升

Vue2 中，每次数据更新重新渲染时，静态节点，也会在虚拟 DOM 树中重新创建一次。执行 diff 算法来比较旧的虚拟 DOM 树和新的虚拟 DOM 树，通过对静态节点打上标记，来优化 diff 的过程
Vue3 中，是通过将静态节点提升到渲染函数之外，渲染函数内部只会保持对静态节点的引用。这样重新渲染时，并不会创建静态的虚拟节点，从而减少了不必要的计算和操作，提高了渲染性能

下面用一段代码说明，假设我们有如下模板：

在没有静态提升的情况下，它对应的渲染函数是：

有了静态提升的情况：

3. 源码体积

Vue3 中移除了一些不常用的 API，整体体积变小了
使用的函数方法，如 ref、reactive、computed 等，只有再用到的时候才会进行打包

Vue3 有哪些变化？

响应式系统

用 Proxy 代替 Object.defineProperty 重构了响应式系统，可以监听到数组下标的变化，对象属性的变化

生命周期

用 setup 代替了 beforeCreate 和 created 这两个生命周期

指令

新增指令 v-memo 可以缓存 html 模板
插槽 slot 和 slot-scope 屬性已被废弃，用 v-slot 代替

内置 API

移除了 Vue.filter、Vue.mixin、Vue.set 和 Vue.delete

编译

组件模板中不再需要唯一根节点，不需要根元素包裹

组合式 API

新增 Composition API 可以更好的组织代码，同一功能的代码不至于像以前一样太分散。Vue2 中可以用 minxin 来实现复用代码，但也会存在一些问题，比如方法或属性名会冲突，代码来源不明显等

组合式 API 有什么优缺点？

优点：

提供了灵活性和逻辑复用方式，相关的逻辑代码组织在一起，方便了阅读

缺点：

对于初学者或已经习惯于响应式 API 的开发者来说，切换到组合式 API 可能需要一些时间来熟悉用法和设计思想
组合式 API 提供了更强大的灵活性，开发者可以自由的组织代码和逻辑处理。但这可能会导致代码结构不一致，代码更难以理解和维护

选项式 API 有什么优缺点？

优点：

易于学习和使用，写代码的位置已经固定好

缺点：

当组件变得复杂时，同一个功能的逻辑被拆分，点会变得很分散
相似的逻辑代码不便于复用

选项式 API 和组合式 API 的区别？

选项式 API：Vue2 中的就是选项式 API。在一个文件内，只能固定使用、、等选项来组织代码。在项目变得复杂时，一个功能的属性和方法会存在文件的各个地方，很分散，变的越来越难维护。使用 mixin 重用共用代码，也会有命名冲突，数据来源不清晰的问题
组合式 API：Vue3 中的就是组合式 API。通常把一个功能所定义的属性、方法放在一起，可以更灵活的组织逻辑。解决了选项式 API 不好拆分和重用的问题

Vue3 响应式原理和 Vue2 的区别？

数据响应式是通过劫持属性，在数据变化时发布消息给订阅者，触发相应的监听回调，这其中存在几个问题：

初始化数据需要递归遍历对象所有，性能不好
通知更新需要维护大量的实例和实例，占用额外的内存
无法监听到数组元素的变化，只能通过重写数组方法
动态新增、删除对象属性无法拦截，只能通过特定、API 代理
不支持、等数据结构

在中为了解决这些问题：

使用原生代理，可以监听到数组下标的变化，对象属性的变化，多达 13 种拦截方法
新增数据结构全部支持
对象嵌套属性只代理第一层，只有访问某个属性的时候，才会递归代理下一级的属性
也不需要维护特别多的依赖关系

Object.defineProperty 和 Proxy 的区别？

是的方法。是的方法
不能监听到数组下标变化和对象新增属性。可以
是劫持对象属性。是代理整个对象
是递归遍历对象属性，只能监听单个属性。对象嵌套属性运行时递归，用到的时候再进行代理，也不需要维护特别多的依赖关系，性能提升很大，且首次渲染更快
会污染原对象，修改时是修改原对象。是对原对象进行代理并会返回一个新的代理对象，修改的是代理对象
不兼容 IE8。不兼容 IE11

谈谈你对 setup 函数的了解？

setup 会在 beforeCreate() 之前执行
setup 不能使用 this
setup 内部的属性、方法，必须 return 暴露出来。否则没法使用
setup 内部数据不具有响应式
setup 不能调用生命周期相关函数，但生命周期函数可以调用 setup 内的函数

setup 方法和 setup 语法糖的区别？

ref 和 reactive 区别？

定义数据
通常用来定义基本类型数据，也可以传入引用类型的数据，内部会通过转化为代理对象，只是不推荐这么做
用来定义引用类型数据
实现原理
通过来实现数据代理
使用实现数据代理，并且通过操作原对象内部的数据
操作数据
在 js 中，和修改数据需要，中不需要
不需要

reactive 可以创建基本类型的（单一值）响应式数据么?

不可以传入基本类型数据，如果传入则不会返回对象，由于是基于实现响应式的，如果返回的不是对象，则该数据不会具有响应式

怎么重置 reactive 数据？

第一种

第二种

第三种

打包

说说 wepack 和 vite 的区别？

打包过程
- 会对项目进行全量构建，首先会分析各个模块之间的依赖关系，形成一个依赖树，然后打包成文件，将打包后的代码在本地服务器进行渲染。这样存在的问题就是，随着模块的增多，打包体积变大，影响热更新的速度
- 不需要向一样先打包再渲染。它可以直接启动本地服务器进行渲染，它利用浏览器原生的 ES 模块加载功能（现代浏览器本身支持），会自动向依赖的模块发出请求，按需动态编译显示（每个模块可以独立的进行编译和缓存）
热更新方面
- 当改动了某个模块时，需要将模块以及依赖的模块全部编译一次
- 只需让浏览器重新请求该模块

结果：通过比较可以看出在启动的时候不需要打包，不用分析模块之间的依赖关系，浏览器请求某个模块时，再对模块进行编译。当项目越复杂，模块越多的情况，越优于

怎么开启 gzip?

1. Nginx 在线压缩
通过 CPU 负载换取宽度，客户端请求静态资源时，通过 Nginx 在线压缩 gz 文件返回浏览器，浏览器自动解压缩（支持 gzip 的浏览器）

2. Koa2 开启 gzip
node 直接对源文件进行 gzip 压缩，返回压缩后的资源
[koa-compress]https://www.npmjs.com/package/koa-compress

2.1 安装 koa-compress 中间件

2.2 配置 koa-compress 中间件

3. webpack 开启 gzip 压缩
服务端进行压缩，如果压缩的文件比较大，压缩的这个过程也比较耗时，体验也不是太好
可以在前端打包的时候，直接打包成的文件

3.1 安装 compression-webpack-plugin

3.2 Vue.config.js 配置

3.3 nginx 配置

4. vite 开启 gzip 打包
4.1 安装

4.2 vite.config.js 配置