2021-7月-前端就业班实战面试提问率最高的5道题-北京地区中小型公司&vue框架

1、☆ ☆ ☆ ☆ ☆ Composition API 的出现带来哪些新的开发体验，为啥需要这个？

1. 在Composition API 中时根据逻辑相关组织代码的，提高可读性和可维护性，类似于react的hook写法。

2.更好的重用逻辑代码，在Options API中通过MIxins重用逻辑代码，容易发生命名冲突且关系不清。

3.解决在声明周期函数经常包括不相关的逻辑，但有不得不把相关逻辑分离到几个不同方法中的问题，如在mounted中设置定时器，但需要在destred中国来清除定时器，将同一功能的代码拆分到不同的位置，造成后期代码维护的困难。

2、☆ ☆ ☆ ☆ ☆ 为什么Vuex的mutation不能做异步操作

Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过Action 来提交 mutation实现，这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更到的了解我们的应用。没给mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，否则无法被devtools所监听。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

3、☆ ☆ ☆ ☆ ☆  如何封装一个通用组件

通过组件的封装就是对可复用组件的解耦和样式复用，为了解耦一般数据都是通过父组件传递过来，在子组件中进行数据处理，对于一些较为复杂的数据可能还需要做数据验证，为了避免高耦合，逻辑最好放在父组件中，通过自定义事件将数据回传，子组件只是一个承载体，这样既降低低耦合，保证子组件中数据和逻辑不会混乱。如何同一组件需要适应不同需要时，我们需要配合slot来使用，可以通过具名插槽灵活的解决了不同场景同一组件不同配置的问题。

4、☆ ☆ ☆ ☆ ☆ Vue响应式原理

  1.观察者observer：首先通过观察者对data中的属性使用object.defineproperty劫持数据的getter和setter，通知订阅者，触发他的update方法，对视图进行更新。

2.Compile：用来解析模板指令，并替换模板数据，初始化视图，初始化相应的订阅器。

3.订阅者watcher：订阅者接到通知后，调用update方法更新对应的视图。

4.订阅器Dep：订阅者可能有多个，隐藏需要订阅器Dep来专门接受这些订阅者，并统一管理

但在VUE3中抛弃了object.defineproperty方法。

        4-1.Object.defineproperty无法监测对象属性的添加和删除，数组索引和长度的变更，因此vue重写了数组的push/pop/shift/unshift/splice/sort/reverse方法。

        4-2.Object.defineproperty只能劫持对象的属性因此我们需要对每个对象的每个属性进行遍历，这样很消耗性能。

        4-3.vue3中实现数据双向绑定的原来是数据代理，使用proxy实现。Proxy可以理解成，在目标对象之前架设一次‘拦截’，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

5、☆ ☆ ☆ ☆ ☆ nextTick知道吗、实现的原理是什么？是宏任务还是微任务？

 nextTick ：微任务

 原理：

nextTick方法主要是使用了宏任务和微任务，定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空队列。

作用：

nextTick用于下次Dom更新循环结束之后执行延迟回调，在修改数据之后使用nextTick用于下次Dom更新循环结束之后执行延迟回调，在修改数据之后使用nextTick用于下次Dom更新循环结束之后执行延迟回调，在修改数据之后使用nextTick，则可以在回调中获取更新后的DOM。