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 替我们做了哪些工作？
如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
首页
主要用途是搜索，有搜索框组件和时钟组件组成，并且搜索框组件聚焦时可以看到历史记录以及热门搜索，同时聚焦时背景图上有一个放大以及毛玻璃的效果；
快捷页
快捷入口的集合，打开时背景图同样有一个放大以及毛玻璃的效果；
另外，在整个项目里，使用到了lowdb来对数据进行缓存和读取（其实就是localstage），使用到了loadsh作为函数库
===============================================================
既然是基于Vue，那么开始必须是基于Vue3的脚手架搭建项目，具体命令如下：
vue create start
注意的是，在配置项目的时候需要选择安装TypeScript，以及使用到了CSS的预处理器：less，实际上我觉得Sass更符合我个人的使用习惯，但是公司的项目都是用的less，那么这里也就继续使用less作为预处理器，两者其实差不多，没什么根本性的不同；
=============================================================
感觉没有必要将每一行代码都放在博客里，那样的话感觉整篇博客都是长篇代码而且效果也不好，博客里又不能调试，要看整体代码直接下载项目就是了，还能一边看一边调试，本文主要记录一下涉及到的功能点的代码，方便理解Vue3+Typescript（由于代码写的比较早，现在回过头来看还是又一些可以优化的地方的，写的不好的地方多多见谅）；
这个组件的主要目的是用来做布局，因为新的界面交付到我们开发手里时，不能直接开始写代码，肯定要写一些布局组件，用来对页面进行合理的布局，布局组件写完后，只要在对应的位置填入对应的组件就行了，这样就不用在每一个页面都写一遍布局，这样不科学也太累，一旦需求发生变化，如果每个页面都是进行布局那工作了就成倍的增加了；
布局组件部分代码如下，在本项目中这个布局组件除了用来布局，还用来做各个子组件的数据的一个交互的链接点，因为不管是快捷入口还是搜索栏组件都会对背景组件的状态产生修改，一旦状态发生变化，那么这个组件就可以用来临时做数据的中转：
<template #backgourndImage>
<base-background
:glass=“glass”
@changeGlass=“changeGlass”
:shortcuts=“shortcuts”
@changeShortcuts=“changeShortcuts”
<template #clock>
<clock-component
:glass=“glass”
:search=“searchState”
v-show=“!shortcuts”
/>
<template #search>
<search-component
@changeFocus=“changeFocus”
:glass=“glass”
v-show=“!shortcuts”
/>
<template #copyright>
<template #shortcuts>
// 组件、库、接口等引入
我们写了一个base-layout的组件用来做布局，并且在组件中预留了4个插槽，分别用来放置背景组件，主界面，快捷入口，版权信息，这样整体的结构不会凌乱，而base-layout部分代码如下：
就是做了一个布局，对每一块内容都进行圈定范围，并且预留了插槽用来内容填充；
这个组件主要的功能就是背景图的放大以及毛玻璃，这两块效果其实都是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;
}
刷面试题
刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。
}
.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;
}
刷面试题
刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
前端字节跳动真题解析
-
【269页】前端大厂面试题宝典
最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。
897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
