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()
- 创建后:created -> 使用setup()
- 挂载前:beforeMount -> onBeforeMount
- 挂载后:mounted -> onMounted
- 更新前:beforeUpdate -> onBeforeUpdate
- 更新后:updated -> onUpdated
- 销毁前:beforeDestroy -> onBeforeUnmount
- 销毁后:destroyed -> onUnmounted
- 异常捕获: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 会被自动调用。
但是存在以下问题:
-
添加或删除对象的属性时,Vue 检测不到。因为添加或删除的对象没有在初始化进行响应式处理,只能通过$set 来调用Object.defineProperty()处理。
-
无法监控到数组下标和长度的变化。
- Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能,其作用为:用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。相对于Object.defineProperty(),其有以下特点:
-
Proxy 直接代理整个对象而非对象属性,这样只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性。
-
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>