每天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>
相关推荐
游荡de蝌蚪2 分钟前
快速打造Vue后台管理系统
前端·javascript·vue.js
June_liu2 小时前
列太多vxe-table自动启用横向虚拟滚动引起的bug
前端·javascript
云枫晖2 小时前
手写Promise-then的基础实现
前端·javascript
养生达人_zzzz2 小时前
飞书三方登录功能实现与行业思考
前端·javascript·架构
GarrettGao2 小时前
Frida常见用法
javascript·python·逆向
肥晨2 小时前
前端私有化变量还只会加前缀嘛?保姆级教程教你4种私有化变量方法
前端·javascript
小高0072 小时前
前端 Class 不是花架子!3 个大厂常用场景,告诉你它有多实用
前端·javascript·面试
没有鸡汤吃不下饭4 小时前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
码流之上4 小时前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
Asort6 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript