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 有哪些变化？

响应式系统

用 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 中的 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 数据？

第一种

import { reactive } from 'vue'

class InitFormData {

  userName: string = ''

  age: number = 0

}

let formData = reactive(new InitFormData())

// 重置数据

Object.assign(formData, new InitFormData())

第二种

import { reactive } from 'vue'

const initFormData = () => {

  return {

    userName: '',

    age: 0

  }

}

let formData = reactive(initFormData())

// 重置数据

Object.assign(formData, initFormData())

第三种

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 的文件进行压缩

  })

]