【秋招面经】超星集团前端题目总结

前言

本次主要搬运超星集团面试的常问问题

问题总结


组件通信?

(1)props、 $ emit
父组件通过props向子组件传值,子组件通过$ emit自定义事件向父组件传值
(2)$ emit、$ on
组件之间,不仅限父子组件
通过 var Event = new Vue(); 做为事件的总线,Event.$ emit(事件名,数据)、Event.$on(事件名,data=>{})
3)vuex
vuex实现单向数据流,【vueComponent】 通过 $store.disaptch(‘事件名’,data)触发【Actions】,然后通过 $store.commit() 触发【mutation】,最后更新【state】
4) $ attrs、 $listeners
$ attrs 会包含父组件中没有被props的所有属性,通过v-bind=" $ attrs"可以传入内部组件,$ listeners 会包含父组件中所有v-on的事件,通过v-on=" $ listeners"可以传入内部组件
(5)provide、inject
祖先组件通过provide提供一个变量,然后子孙组件通过inject注入变量并使用
(6) $ parent、$ children、ref
ref用在DOM上,引用指向的就是DOM元素,ref用在子组件上,引用指向的就是组件实例

Vuex有在项目中用到吗?

vuex的工作原理

闭包

闭包

常见的设计模式?

) 单例模式。
单例模式是一种常用的软件设计模式。
在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。
应用场景:如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。
2) 工厂模式。
工厂模式主要是为创建对象提供了接口。
应用场景如下:
a、 在编码时不能预见需要创建哪种类的实例。
b、 系统不应依赖于产品类实例如何被创建、组合和表达的细节。
3) 策略模式。
策略模式:定义了算法族,分别封装起来,让它们之间可以互相替换。此模式让算法的变化独立于使用算法的客户。
应用场景如下。
a、 一件事情,有很多方案可以实现。
b、我可以在任何时候,决定采用哪一种实现。
c.、未来可能增加更多的方案。
d、 策略模式让方案的变化不会影响到使用方案的客户。
举例业务场景如下。
系统的操作都要有日志记录,通常会把日志记录在数据库里面,方便后续的管理,但是在记录日志到数据库的时候,可能会发生错误,比如暂时连不上数据库了,那就先记录在文件里面。日志写到数据库与文件中是两种算法,但调用方不关心,只负责写就是。
4) 观察者模式。
观察者模式又被称作发布/订阅模式,定义了对象间一对多依赖,当一个对象改变状态时,它的所有依赖者都会收到通知并自动更新。
应用场景如下:
a、对一个对象状态的更新,需要其他对象同步更新,而且其他对象的数量动态可变。
b、对象仅需要将自己的更新通知给其他对象而不需要知道其他对象的细节。
5) 迭代器模式。
迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不暴露该对象的内部表示。
应用场景如下:
当你需要访问一个聚集对象,而且不管这些对象是什么都需要遍 历的时候,就应该考虑用迭代器模式。其实stl容器就是很好的迭代器模式的例子。
6) 模板方法模式。
模板方法模式定义一个操作中的算法的骨架,将一些步骤延迟到子类中,模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些步骤。
常见的六种设计模式以及应用场景

怎么缓存组件的状态?

vue-18怎么缓存当前的组件?缓存后怎么更新?

深浅拷贝?

【深拷贝和浅拷贝】

浏览器缓存

浏览器第一次加载资源,服务器返回 200,浏览器从服务器下载资源文件,并缓存资源文件与 response header,以供下次加载时对比使用;
下一次加载资源时,由于强制缓存优先级较高,先比较当前时间与上一次返回 200 时的时间差,如果没有超过 cache-control 设置的 max-age,则没有过期,并命中强缓存,直接从本地读取资源。如果浏览器不支持HTTP1.1,则使用 expires 头判断是否过期;
如果资源已过期,则表明强制缓存没有被命中,则开始协商缓存,向服务器发送带有 If-None-Match和 If-Modified-Since 的请求;
服务器收到请求后,优先根据 Etag 的值判断被请求的文件有没有做修改,Etag 值一致则没有修改,命中协商缓存,返回 304;如果不一致则有改动,直接返回新的资源文件带上新的 Etag 值并返回 200;
如果服务器收到的请求没有 Etag 值,则将 If-Modified-Since 和被请求文件的最后修改时间做比对,一致则命中协商缓存,返回 304;不一致则返回新的 last-modified 和文件并返回 200;

你有二次封装过ElementUI组件吗?

vue-cli如何对element-ui组件进行二次封装

组件封装

  • 哪些情况需要封装组件
    一段代码在项目中出现两次就开始考虑是否应该进行封装,出现三次就肯定要封装,大到一个页面,一个组件,小到一个function和一个css样式。
  • 封装原则
    1、单一原则:负责单一的页面渲染
    2、多重职责:负责多重职责,获取数据,复用逻辑,页面渲染等
    3、明确接受参数:必选,非必选,参数尽量设置以_开头,避免变量重复
    4、可扩展:需求变动能够及时调整,不影响之前代码
    5、代码逻辑清晰
    6、封装的组件必须具有高性能,低耦合的特性
    7、组件具有单一职责:封装业务组件或者基础组件,如果不能给这个组件起一个有意义的名字,证明这个组件承担的职责可能不够单一,需要继续抽组件,直到它可以是一个独立的组件即可。

自己配置过webpack吗?

webpack超详细配置, 使用教程

猜你喜欢

转载自blog.csdn.net/qq_40992225/article/details/128079440