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。

上一篇:2021-08-02


下一篇:APS.NET MVC + EF (04)---路由和数据传递