每天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>