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

Vue3 对比 Vue2 做了那些改进？

1. 响应式系统

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

2. 编译阶段

• Fragment

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

• 静态节点提升

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

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

<div>
  <p>static text</p>
  <p>{{ title }}</p>
</div>

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

function render() {
  return (
    openClock(),
    createClock('div', null, [
      createVNode('p', null, 'static text'), // 静态节点被重新创建
      createVNode('p', null, ctx.title, 1)
    ])
  )
}

有了静态提升的情况：

const hoist1 = createVNode('p', null, 'text')
function render() {
  return (
    openBlock(),
    createBlock('div', null, [
      hoist1, // 静态节点引用
      createVNode('p', null, ctx.title, 1)
    ])
  )
}

3. 源码体积

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

Vue3 有哪些变化？

1. 响应式系统

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

2. 生命周期

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

3. 指令

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

4. 内置 API

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

5. 编译

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

6. 组合式 API

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

组合式 API 有什么优缺点？

优点：

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

缺点：

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

选项式 API 有什么优缺点？

优点：

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

缺点：

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

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

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

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

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

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

在Vue3中为了解决这些问题：

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

Object.defineProperty 和 Proxy 的区别？

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

谈谈你对 setup 函数的了解？

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

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

// 方法
setup(props.context) {}

// 语法糖
<script setup></script>

ref 和 reactive 区别？

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

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

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

怎么重置 reactive 数据？

1. 第一种

import { reactive } from 'vue'

class InitFormData {
  userName: string = ''
  age: number = 0
}

let formData = reactive(new InitFormData())

// 重置数据
Object.assign(formData, new InitFormData())

2. 第二种

import { reactive } from 'vue'

const initFormData = () => {
  return {
    userName: '',
    age: 0
  }
}

let formData = reactive(initFormData())

// 重置数据
Object.assign(formData, initFormData())

3. 第三种

import {reactive} from 'vue'

const initFormData = {
  userName: '',
  age: 0
}

const _initFormData = Object.assign({}, initFormData)

let formData = reactive{formData: initFormData}

// 重置数据
formData.formData = Object.assign({}, _initFormData)

打包

说说 wepack 和 vite 的区别？

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

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

怎么开启 gzip?

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

gzip on;
gzip_min-length 1K;
gzip_buffers 4 16K;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

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

2.1 安装 koa-compress 中间件

npm install koa-compress --save

2.2 配置 koa-compress 中间件

const app = require('koa')()
const compress = require('koa-compress')
const options = { threshold: 2048 }
app.use(compress(options))

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

3.1 安装 compression-webpack-plugin

npm install compression-webpack-plugin --save-dev

3.2 Vue.config.js 配置

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
 configureWebpack: {
   plugins: [
     new CompressionPlugin({
       algorithm: 'gzip', // 使用 gzip 压缩
       test: /\.(js|css|html)?$/i, // 匹配文件名
       filename: '[path][base].gz[query]', // 压缩后的文件名（保持原文件名，后缀加.gz）
       minRatio: 0.8, // 默认 0.8，压缩率小于 1 才会进行压缩
       threshold: 10 \* 1024, // 超过 10K 的文件会进行压缩
       deleteOriginalAssets: false // 是否删除未压缩的源文件。如果希望提供非 gzip 的资源，可不设置或设置为 false
     })
   ]
 }
}

3.3 nginx 配置

gzip_static on;

4. vite 开启 gzip 打包
4.1 安装

npm i vite-plugin-compression

4.2 vite.config.js 配置

import viteCompression from 'vite-plugin-compression'
const plugins = [
  vue(),
  vueJsx(),
  viteCompression({
    threshold: 10 * 1024 // 对大于 10K 的文件进行压缩
  })
]