2024年最新《Vue3+TS》开发一个自己的起始页，2024最新秋招前端岗面试清单

本文链接：https://blog.csdn.net/2401_84411767/article/details/138537399

JavaScript

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。
如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）
Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？
JS常见的dom操作api
解释一下事件冒泡和事件捕获
事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？
对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？
this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？
call，apply，bind
显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链
创建对象的多种方式
实现继承的多种方式和优缺点
new 一个对象具体做了什么
手写Ajax，XMLHttpRequest
变量提升
举例说明一个匿名函数的典型用例
指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？
attribute和property的区别
document load和document DOMContentLoaded两个事件的区别
JS代码调试
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

就是做了一个布局，对每一块内容都进行圈定范围，并且预留了插槽用来内容填充；

背景组件

这个组件主要的功能就是背景图的放大以及毛玻璃，这两块效果其实都是CSS实现的，JS实现的主要是在什么时机触发这个效果，在本项目中，触发的时机一共有两个：

处于首页的时候，输入框聚焦，此时的背景组件会触发放大和毛玻璃效果；
右击首页，打开快捷入口的时候，也会触发放大和毛玻璃效果；

部分代码如下：

另外，这里还有一个骨架屏的效果，就是当背景图还没有被加载的时候，整个背景图处于灰色，并且有一个从左往右的动效，代表正在加载中，骨架屏效果代码如下：

.threeS-loading {

background-color: #f2f2f2;

background: linear-gradient(

100deg,

rgba(255, 255, 255, 0) 40%,

rgba(255, 255, 255, 0.5) 50%,

rgba(255, 255, 255, 0) 60%

)

#f6f6f6;

background-size: 200% 100%;

background-position-x: 120%;

animation: 1s loading ease-in-out infinite;

}

@keyframes loading {

to {

background-position-x: -20%;

}

时钟组件

这个组件的难点在于实现电子数字的格式，这个是最复杂的，而时间的获取就是基于浏览器Date对象，这个很简单，获取时间的方法部分如下：

/**

获得时间
@returns {String} 当前时间

function getTime(): string {

const date = new Date();

const hour = date.getHours();

const minute = date.getMinutes();

return (

(hour >= 10 ? hour : “0” + hour) +

“:” +

(minute >= 10 ? minute : “0” + minute)

);

}

当获取到时间以后，需要将转成电子格式的，这部分的原理就是先拼出一个电子格式的8，然后，不同的数字只是去掉8中的某一个笔划，这样就达到了0-9的数字，这里我挑一部分CSS代码

.digits div span {

opacity: 0;

position: absolute;

-webkit-transition: 0.25s;

-moz-transition: 0.25s;

transition: 0.25s;

}

.digits div span:before,

.digits div span:after {

content: “”;

position: absolute;

width: 0;

height: 0;

border: @fontSize solid transparent;

}

.digits .d1 {

height: @fontSize;

width: 16px;

top: 0;

left: 6px;

}

.digits .d1:before {

border-width: 0 @fontSize @fontSize 0;

border-right-color: inherit;

left: -@fontSize;

}

.digits .d1:after {

border-width: 0 0 @fontSize @fontSize;

border-left-color: inherit;

right: -@fontSize;

}

.digits .d2 {

height: @fontSize;

width: 16px;

top: 24px;

left: 6px;

}

.digits .d2:before {

border-width: 3px 4px 2px;

border-right-color: inherit;

left: -8px;

}

.digits .d2:after {

border-width: 3px 4px 2px;

border-left-color: inherit;

right: -8px;

}

这里是1和2的组成，通过类似的方法将0-9的CSS都写完，之后获取到时间，在填入的时候判断需要填入的是哪个数字就行：

/**

填入时间
@param {String} time - 时间
@param {HTMLElement} timerClock - 填入时间的DOM
@returns 无

function clocknum(time: string, timerClock: HTMLElement): void {

timerClock.innerHTML = “”;

var html = “”;

var strarr: any[] = time.toString().split(“”);

var digit_to_name = “zero one two three four five six seven eight nine”.split(

" "

);

for (var i = 0; i < strarr.length; i++) {

if (strarr[i] == “:”) {

html += ‘

’;

} else {

var clasname = digit_to_name[strarr[i]];

html +=

‘<div class="’ +

clasname +

‘">’ +

‘’ +

“”;

}

timerClock.innerHTML = html;

}

这样时间组件就算基本完成了，使用的时候只需要引入主页，放在对应的位置就可以了；

搜索组件

搜索组件一共分为两部分，需要单独实现，分别为：搜索框，搜索历史（热门搜索）；

搜索框

这个其实简单，其实就是一个输入框，并且在其上附加了一个聚焦事件，用于和背景组件的联动，确认搜索的时候根据搜索类型打开对应的页签就可以了，并且确认搜索的时候，将该条搜索条件作为记录存储到本地缓存中，所谓历史记录的一部分，部分实现代码如下：

:class="[

‘threeS-search-container’,

{ ‘threeS-search-hover’: mouseEnter },

{ ‘threeS-search-active’: glass },

@mouseenter=“handleMouseEvent”

@mouseleave=“handleMouseEvent”

<input

class=“threeS-search-input”

type=“text”

:placeholder=“glass ? ‘’ : ‘搜索内容’”

@focus=“handleFocus”

v-model=“searchValue”

@keyup.enter=“handleSearch”

<button

v-if=“glass”

class=“icon iconfont icon-magnifier search-icon”

@click=“handleSearch”

:class="[

‘threeS-search-type-container’,

{ ‘threeS-type-focus’: glass },

class=“threeS-search-type”

:class=“[{ ‘is-active’: item.id === searchType }]”

v-for=“item in searchTypeList”

:key=“item.id”

@click=“handleSearchType(item)”

这个是HTML部分，从结构上看没有什么复杂的，只是搜索的按钮需要融入搜索框的背景之中，不显突兀；

const searchTypeList: searchType[] = [

{

id: “baidu”,

url: “https://www.baidu.com/s?wd=”,

{

id: “google”,

url: “https://www.google.com/search?q=”,

{

id: “bing”,

url: “https://cn.bing.com/search?q=”,

{

id: “taobao”,

url: “https://s.taobao.com/search?q=”,

];

const searchType: Ref = ref(searchTypeList[0].id);

const searchUrl: Ref = ref(searchTypeList[0].url);

function handleSearchType(item: searchType): void {

searchType.value = item.id;

searchUrl.value = item.url;

}

这个一部分搜索类型时的代码，这部分也不复杂，但是这部分又很关键，因为每个平台的搜索地址前缀到底是什么样的，网络上查了很久都没查到合理的答案，只能自己试，试了好久才发现；

历史记录

历史记录这一块主要的知识点在Vue部分其实就是一个for循环，通过对数据的便利将其展示出来，对了，还有有一个，就是数据的来源，这里的一部分是来自于后台接口，一部分是来自于本地的localstage，这里存在一个数据合并的问题以及清除历史记录时需要对本地的localstage进行同步清理，下面是部分代码

// ---------- 历史信息 start ----------

const getHistoryInfo: any = computed(

() => store.getters[“basic/basic/getHistory”]

);

watch(

() => getHistoryInfo.value,

(value) => {

historyList.value = value;

}

);

const updateHistory: ActionMethod = (history: urlInterface[]) =>

store.dispatch(“basic/basic/updateHistoryInfo”, history);

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？