vue3面试题整理

1、Options Api与Composition Api的区别？

Options Api： 选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。然而，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解。
Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（ 更加的 高内聚，低耦合 ）。
Composition Api 相对Options Api的优点：
1、在逻辑组织和逻辑复用方面，Composition API是优于Options API
组织逻辑：Composition Api将某个逻辑关注点相关的代码全都放在一个函数里，这样，当需要修改一个功能时，就不再需要在文件中跳来跳去。
逻辑复用：在vue2.0中，当混入多个mixin会存在两个非常明显的问题：命名冲突、数据来源不清晰。而Composition Api可以通过编写多个hooks函数就很好的解决了。
2、因为Composition API几乎是函数，会有更好的类型推断。
3、Composition API 对 tree-shaking 友好，代码也更容易压缩
4、Composition API中见不到this的使用，减少了this指向不明的情况
5、如果是小型组件，可以继续使用Options API，也是十分友好的

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

1、diff算法优化
vue3在diff算法中相比vue2增加了静态标记，其作用是为了会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较。
2、静态提升
Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。免去了重复的创建操作，优化内存。
3、事件监听缓存
默认情况下绑定事件行为会被视为动态绑定（没开启事件监听器缓存），所以每次都会去追踪它的变化。开启事件侦听器缓存后，没有了静态标记。也就是说下次diff算法的时候直接使用。
4、SSR优化
当静态内容大到一定量级时候，会用createStaticVNode方法在客户端去生成一个static node，这些静态node，会被直接innerHtml，就不需要创建对象，然后根据对象渲染。
5、源码体积
相比Vue2，Vue3整体体积变小了，除了移出一些不常用的API，最重要的是Tree shanking。
任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。
6、响应式系统
vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式。
vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历。

• 可以监听动态属性的添加
• 可以监听到数组的索引和数组length属性
• 可以监听删除属性

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

1、vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式。但是存在以下的问题：

• 检测不到对象属性的添加和删除
• 数组API方法无法监听到
• 需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题

2、proxy：监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作。
总结：
1、Object.defineProperty只能遍历对象属性进行劫持
2、Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的
3、Proxy可以直接监听数组的变化（push、shift、splice）
4、Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的

4、Vue3.0响应式原理

vue3 响应式是使用 ES6 的 proxy（代理） 和 Reflect （反射）相互配合实现数据响应式，解决了 vue2 中视图不能自动更新的问题。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
关于Reflect，我们都知道，获取对象的某一属性的值可以用object.key或者object[key]
那么在ES6中，通过Reflect.get(target, key)也可以获取到，ECMA 语法规范组织正在将 Object上的API移植到Reflect，Proxy只会代理对象的第⼀层，判断Reflect.get的返回值是否为Object，如果是则再通过 reactive ⽅法做代理， 这样就实现了深度观测。
二者结合，就形成了一个代理器

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

Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。在Vue3源码引入tree shaking特性，将全局 API 进行分块。如果您不使用其某些功能，它们将不会包含在您的基础包中
Tree shaking主要是借助ES6模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。
Tree shaking无非就是做了两件事：
1、编译阶段利用ES6 Module判断哪些模块已经加载
2、判断哪些模块和变量未被使用或者引用，进而删除对应代码

6、Vue3 新特性有哪些？

1、性能提升

• 响应式性能提升，由原来的 defineProperty 改为基于ES6的 Proxy ，使其速度更快
• diff算法优化，增加静态标志
• 进行模板编译优化（静态提升，不参与更新的元素只被创建一次）
• 更加高效的组件初始化

2、更好的支持 typeScript
Vue.js 3.0 抛弃了 Flow ，使用 TypeScript 重构了整个项目，TypeScript 提供了更好的类型检查，能支持复杂的类型推断
3、新增 Composition API
Composition API 是 vue3 新增的功能，比 mixin 更强大。它可以把各个功能模块独立开来，提高代码逻辑的可复用性，同时代码压缩性更强。
在 Vue3 中，定义 methods、watch、computed、data数据等都放在了 setup() 函数中。
setup()函数会在created()生命周期之前执行。执行顺序为：beforeCreate > setup > created
4、新增组件

• Fragment 不再限制 template 只有一个根节点。

• Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中。

• Suspense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验。

5、Tree-shaking：支持摇树优化
摇树优化后会将不需要的模块修剪掉，真正需要的模块打到包内。优化后的项目体积只有原来的一半，加载速度更快。

7、vue3 组合式API生命周期钩子函数有变化吗？

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：

• beforeDestroy改名为 beforeUnmount
• destroyed改名为 unmounted

2、Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate===>setup()
created===>setup()
beforeMount == = > onBeforeMount
mounted => onMounted
beforeUpdate= == >onBeforeUpdate
updated == >onUpdated
beforeUnmount == >onBeforeUnmount
unmounted ===>onUnmounted

8、watch 和 watchEffect 的区别？

watch的套路是：既要指明监视的属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
watchEffect有点像computed：
但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

9、v-if 和 v-for 的优先级哪个高？

在 vue2 中 v-for 的优先级更高，但是在 vue3 中优先级改变了。v-if 的优先级更高。

10、script setup 是干啥的？

scrtpt setup 是 vue3 的语法糖，简化了组合式 API 的写法，并且运行性能更好。
使用 script setup 语法糖的特点：
1、属性和方法无需返回，可以直接使用。
2、引入组件的时候，会自动注册，无需通过 components 手动注册。
3、使用 defineProps 接收父组件传递的值。
4、useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件。
5、默认不会对外暴露任何属性，如果有需要可使用 defineExpose 。

11、Vue3通信方式：

1、props（父传子）
2、$emit（子传父）3、expose/ref：子组件通过expose暴露自身的方法和数据，父组件通过ref获取到子组件4、$attrs
5、v-model：v-model 是 Vue 的一个语法糖。在 Vue3 中的玩法就更多
6、插槽slot
7、provide / inject（依赖注入多层传值）
8、Vuex/pinia
9、mitt

12、ref与reactive的区别？

ref与reactive 是 Vue3 新推出的主要 API 之一，它们主要用于响应式数据的创建。
1、在 Vue3 中 reactive 能做的，ref 也能做，reactive 不能做的，ref 也能做。
2、ref 函数创建的响应式数据，在模板中可以直接被使用，在 JS 中需要通过 .value 的形式才能使用。Reactive操作数据与读取数据：均不需要.value。
3、ref 函数可以接收原始数据类型与引用数据类型。reactive 函数只能接收引用数据类型，比如对象。
4、ref 底层还是使用 reactive 来做，ref 是在 reactive 上在进行了封装，增强了其能力，使它支持了对原始数据类型的处理。

13、EventBus与mitt区别？

Vue2 中我们使用 EventBus 来实现跨组件之间的一些通信，它依赖于 Vue 自带的 $on/$emit/$off 等方法，而 Vue3 中移除了这些相关方法，这意味着 EventBus 这种方式我们使用不了， Vue3 推荐尽可能使用 props/emits、provide/inject、vuex 等其他方式来替代。
官方建议使用一些外部的辅助库，例如：mitt，支持TS

14、谈谈pinia?

Pinia 是 Vue 官方团队成员专门开发的一个全新状态管理库，并且 Vue 的官方状态管理库已经更改为了 Pinia。在 Vuex 官方仓库中也介绍说可以把 Pinia 当成是不同名称的 Vuex 5，这也意味不会再出 5 版本了。
优点
1、更加轻量级，压缩后提交只有1.6kb。
2、完整的 TS 的支持，Pinia 源码完全由 TS 编码完成。
3、移除 mutations，只剩下 state 、 actions 、 getters 。
4、无需手动添加每个 store，它的模块默认情况下创建就自动注册。
5、支持服务端渲染（SSR）
6、更友好的代码分割机制

15、vite为什么比webpack快

之前的项目启动项目需要30s以上，修改代码更新也需要2s以上，但是现在使用Vite，差不多启动项目只需要1s，而修改代码更新也是超级快
1、Webpack 是基于 Node.js 实现的，而 Vite 是使用 Esbuild 预构建依赖，Esbuild 使用 Go 语言编写，比以 Node.js 编写的打包器预构建依赖快 10-100 倍。
2、Webpack 叫做 bundler ，将所有文件打包成一个文件。
Webpack 先识别入口文件，启动服务器后，最后直接给出打包结果。Webpack 做的是分析代码，转换代码，最后形成打包后的代码。
Vite 又叫做 no bundler ，顾名思义，就是不用打包，支持 ES moudle 加载。
Vite 启动服务器后，会按需加载，当请求哪个模块时才会对该模块进行编译。按需加载的方式，极大的缩减了编译时间。