每天10个vue面试题(九)

1、如何在组件中批量使用Vuex的getter属性?

  • 使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中
  • computed:{
  • ...mapGetters(['total','discountTotal'])
  • }

2、vue2和vue3的区别?

  • 双向数据绑定不同:vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 Proxy 对数据代理
  • 根节点不同:Vue3支持碎片(Fragments),vue2中必须要有根标签。vue3中可以没有根标签,会默认将多个根标签包裹在一个fragement虚拟标签中,有利于减少内存
  • Vue2使用选项式API(Options API),Vue3引入了组合式API(Composition API)
  • 性能体积:Vue 3相比Vue 2在速度上更快,体积更小。Vue 3重写了虚拟DOM,优化了响应式系统的实现。
  • 生命周期不同:创建前:beforeCreate -> 使用setup()
  1. 创建后:created -> 使用setup()
  2. 挂载前:beforeMount -> onBeforeMount
  3. 挂载后:mounted -> onMounted
  4. 更新前:beforeUpdate -> onBeforeUpdate
  5. 更新后:updated -> onUpdated
  6. 销毁前:beforeDestroy -> onBeforeUnmount
  7. 销毁后:destroyed -> onUnmounted
  8. 异常捕获:errorCaptured -> onErrorCaptured
  • diff算法不同
  • 更好的支持ts
  • v-if和v-for优先级不同:在vue2中v-for的优先级高于v-if,可以放在一起使用,但是会带来性能上的浪费;在vue3中v-if的优先级高于v-for,一起使用会报错。可以通过在外部添加一个标签,将v-for移到外层

3、defineProperty和proxy的区别?

  • Vue2 中在实例初始化时遍历 data 中的所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这样当追踪数据发生变化时,setter 会被自动调用。

但是存在以下问题:

  1. 添加或删除对象的属性时,Vue 检测不到。因为添加或删除的对象没有在初始化进行响应式处理,只能通过$set 来调用Object.defineProperty()处理。

  2. 无法监控到数组下标和长度的变化。

  • Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能,其作用为:用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。相对于Object.defineProperty(),其有以下特点:
  1. Proxy 直接代理整个对象而非对象属性,这样只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性。

  2. Proxy 可以监听数组的变化。


4、vue3为什么要用proxy?

  • Proxy 是创建对象的虚拟表示,提供了 set 、get 和 deleteProperty 等处理器,这些处理器可在访问或修改原始对象上的属性时进行拦截,有以下特点∶
  • 不需用使用 Vue.set 或 Vue.delete 触发响应式。
  • 全方位的数组变化检测,消除了Vue2 无效的边界情况。
  • 支持 Map,Set,WeakMap 和 WeakSet。

5、vue3 Composition API(组合式api) 是什么?

  • 组合式 API (组合式API) 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语,涵盖了以下方面的 API:
  • 响应式 API:例如 ref() 和 reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。
  • 生命周期钩子:例如 onMounted() 和 onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。
  • 依赖注入:例如 provide() 和 inject(),使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。
  • 主要目的是:为了增强代码的可读性和可维护性;允许相同逻辑代码在不同组件中进行完整复用

6、组合式api和选项式api区别 / 优缺点?

  • 选项式:

一、优点:

1,简单易用:选项式API提供了一些预定义的选项,使得开发者可以快速构建API。

2,可靠性高:选项式API的选项是由API提供者预先定义的,经过测试和验证,可靠性较高。

3,集成容易:选项式API提供了一些预定义的选项,使得开发者无需具备过多的集成能力。

二、缺点:

1,灵活性差:选项式API的选项是由API提供者预先定义的,开发者无法自由地组合API。

2,可复用性差:选项式API的选项仅适用于特定情况,不能被其他场景重复使用。

3,可扩展性差:选项式API的选项是由API提供者预先定义的,如果需要增加新的选项,需要API提供者进行更新。

  • 组合式:

一、优点:

1,灵活性高:组合式API可以根据具体需求组合不同的API,实现更加灵活的功能。

2,可复用性好:组合式API中的每个API可以独立使用或者组合使用,使得API的复用性更高。

3,可扩展性强:组合式API可以通过不断增加新的API来扩展功能。

二、缺点:

1,复杂度高:组合式API中的每个API都需要单独维护,当API数量增多时,会增加系统的复杂度。

2,集成难度大:组合式API需要对API进行组合,需要开发者具备一定的集成能力。

3,可靠性低:组合式API的可靠性取决于每个API的稳定性,如果其中一个API出现问题,整个系统都会受到影响。


7、Vue3中的Teleport是什么?它的作用是什么?

  • Vue3中的Teleport 是控制渲染位置的新指令。它的作用是在DOM中移动一个组件的内容而不改变组件的父级。

8、Vue3中的Suspense是什么?它的作用是什么?

  • Vue3中的Suspense是Vue3中新增的一个组件,它的作用是实现延迟加载和错误处理。在组件中加入Suspense,可以让异步组件可以渲染出加载状态,并且如果异步组件加载时出现错误,也能够处理这些错误。

9、Vue3中的Fragment是什么?它的作用是什么?

  • Vue3中的Fragment是用来承载多个子元素的虚拟组件。它的作用是可以解决在Vue2中,使用v-for迭代元素时需要添加一个包装元素的问题。

10、Vue3中setup是什么?

  • setup是所有CompositionAPI(组合API)的基础,组件中所用到的数据、方法等都需要在setup中进行配置;<script setup>
相关推荐
WilliamLuo31 分钟前
MP4结构初识-第一篇
前端·javascript·音视频开发
过期的H2O21 小时前
【H2O2|全栈】JS进阶知识(七)ES6(3)
开发语言·javascript·es6
前端Hardy1 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
松树戈1 小时前
JS推荐实践
开发语言·javascript·ecmascript
vener_1 小时前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
老码沉思录1 小时前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
计算机毕设孵化场2 小时前
计算机毕设-基于springboot的多彩吉安红色旅游网站的设计与实现(附源码+lw+ppt+开题报告)
vue.js·spring boot·后端·计算机外设·课程设计·计算机毕设论文·多彩吉安红色旅游网站
小王码农记2 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
战神刘玉栋2 小时前
《SpringBoot、Vue 组装exe与套壳保姆级教学》
vue.js·spring boot·后端
乐闻x2 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js