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、 e m i t (子传父) 3 、 e x p o s e / r e f :子组件通过 e x p o s e 暴露自身的方法和数据,父组件通过 r e f 获取到子组件 4 、 emit(子传父) 3、expose / ref:子组件通过 expose 暴露自身的方法和数据,父组件通过 ref 获取到子组件 4、 emit(子传父)3expose/ref:子组件通过expose暴露自身的方法和数据,父组件通过ref获取到子组件4attrs
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 自带的 o n / on/ 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 启动服务器后,会按需加载,当请求哪个模块时才会对该模块进行编译。按需加载的方式,极大的缩减了编译时间。

你可能感兴趣的:(vue,前端,面试)