前言
这一个我学习前端面试题的笔记。
- 一、HTML
- 二、CSS
- 1、CSS选择器有哪些?哪些属性可以继承?
- 2、CSS优先级算法如何计算?
- 3、用CSS画一个三角形
- 4、一个盒子不给宽度和高度如何水平垂直居中?
- 5、对BFC规范(格式块上下文)的理解。
- 6、清除浮动有哪些方式?
- 7、在网页中的应该使用奇数还是偶数的字体?为什么?
- 8、position有哪些值?分别是根据什么定位的?
- 9、写一个左中右布局占满屏幕,其中左、右两块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。
- 10、什么是CSS reset?
- 11、css sprite是什么,有什么缺点
- 12、display: none;与visibility: hidden;的区别
- 13、opacity 和rgba区别
- 14、line-height和height区别
- 15、介绍一下CSS的盒子模型
- 16、flex
- 三、JS
- 1、延迟加载JS有哪些方式?
- 2、JS数据类型有哪些?
- 3、JS数据类型考题
- 4、null和undefined的区别
- 5、== 和===有什么区别?
- 6、JS微任务和宏任务
- 7、JS作用域考题
- 8、JS对象考题
- 9、JS作用域+this指向+原型的考题
- 10、JS判断变量是不是数组,你能写出哪些方法?
- 11、slice是干嘛的、splice是否会改变原数组
- 12、找出多维数组的最大值
- 13、给字符串新增方法实现功能
- 14、找出字符串出现最多次数的字符以及次数
- 15、new操作符具体做了什么
- 16、闭包
- 17、原型链
- 18、JS继承有哪些方式
- 19、call、apply、bind的区别
- 20、sort背后的原理是什么?
- 21、深拷贝和浅拷贝
- 22、localStorage、sessionStorage、cookie的区别
- 四、H5C3
- 五、ES6
- 六、VUE
- 1、vue生命周期
- 2、谈谈你对keep-alive的了解
- 3、v-if和v-show区别
- 4、 v-if和v-for优先级
- 5、ref是什么?
- 6、nextTick是什么?
- 7、scoped原理
- 8、vue中如何做样式穿透
- 9、vue的组件通讯
- 10、computed、methods、watch有什么区别?
- 11、props和data优先级谁高?
- 12、vuex有哪些属性?
- 13、vuex是单向数据流还是双向数据流?
- 14、vuex如何做到持久化存储
- 15、vue路由history、hash
- 16、介绍一下SPA以及SPA有什么缺点
- 17、vue路径传值
- 18、路由导航守卫有哪些
- 19、vue动态路由
- 20、双向绑定原理
- 21、diff算法
- 七、HTTP
- 八、微前端
- 九、小程序
- 十、vue3
- 十一、webpack
- 十二、在项目中做过的复杂的功能
一、HTML
1、行内元素有哪些?块级元素有哪些?空元素有哪些?
- 行内元素:span、img、input…
- 块级元素:div、footer、header、section、p、h1…h6…
- 空元素:br、hr…
- 元素之间转换问题
- display: inline;—转换行内元素,不独占一行,并且不能设置宽高
- display: inline-block; —转换行内块元素,不独占一行,可以设置宽高
- display: block;— 转换块元素,独占一行,可以设置宽高
2、页面导入样式时,使用link和@import有什么区别?
- link先有,后有@import(兼容性link比@import兼容)
- 加载顺序差别,浏览器先加载link,后加载@import
3、title与h1区别、b和strong的区别、i与em的区别?
-
title与h1区别
- title:网站内容主题,显示在网页标题上
- h1:文章主题内容,显示在网页内容上
- title比h1添加的重要(title>h1)对于seo的了解
- 网站的logo都是用h1标签包裹的
-
b和strong的区别
- b:实体标签,文字加粗,没有实际含义
- strong:逻辑标签,加强语气,表示比较重要
- 为了符合css3的规范,b尽量少用改用strong就行了
-
i与em的区别
- i: 实体标签,用来做文字倾斜的,没有实际含义
- em: 逻辑标签,用来强调文字内容,用来强调的
- i更多用在字体图标上,em术语上
4、img 标签的title和alt有什么区别?
- title: 鼠标移入到图片显示的值
- alt: 图片无法加载时显示的值
- 在seo的层面上,蜘蛛抓不到图片的内容,所以前端在写img标签时候为了增加seo效果要加入alt属性来描述这张图什么内容或者关键词
5、png、jpg、gif这些图片格式解释一下,分别什么时候用?
- png:无损压缩,尺寸要比jpg大,适合做小图标
- jpg:采用压缩算法,有一点失真,比png体积小,适合做中大图片
- gif:一般是做动图
- webp:同时支持有损或者无损压缩,webp具有更小的体积,兼容性不是特别好
二、CSS
1、CSS选择器有哪些?哪些属性可以继承?
- CSS选择符:
- 通配(*)
- id选择器(#)
- 类选择器(.)
- 标签选择器(div、p、h1…)
- 相邻选择器(+)
- 后代选择器(ul li)
- 子元素选择器(>)
- 属性选择器(a[href])
- css属性哪些可以继承:
- 文字系列:font-size、color、line-height、text-align…
- 不可继承属性:
- boeder、padding、margin…
2、CSS优先级算法如何计算?
- 优先级比较
- !important > 内联样式 > id > class > 标签 > 通配
- CSS权重计算:
- 第一:内联样式(style) 权重值:1000
- 第二:id选择器 权重值:100
- 第三:类选择器 权重值:10
- 第四:标签&伪元数据选择器 权重值:1
- 第五: 通配、 >、 + 权重值:0
3、用CSS画一个三角形
- 用边框画(border)
- div{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid #ccc;
}
4、一个盒子不给宽度和高度如何水平垂直居中?
-
方式一:
.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 5px solid #ccc;
}
.main{
background: red;
} -
方式二:
.container{
position:relative;
width: 300px;
height: 300px;
border: 5px solid #ccc;
}
.main{
position: absolute;
background: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
} -
回答:
-
行内元素居中:
- 水平居中:text-align: center;
- 垂直居中:行内元素line-height等于父元素的高度
-
块内元素居中1(定位,需要有固定宽高):
- 子块 margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; - 父块 position: relative
- 子块 margin: auto;
-
块内元素居中2(flex):
- 父块 display: flex;
- justify-content: center; 水平居中
- align-items: center; 垂直居中
-
块内元素居中3(transform,CSS3特性):
- 子块 position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); - 父块 position: relative
- 子块 position: absolute;
详细:https://juejin.cn/post/7088272829300342798#heading-8
5、对BFC规范(格式块上下文)的理解。
- BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
- 了 解BFC: 块级格式化上下文
- BFC原则: 如果一个元素具有BFC,那么内部元素再怎么弄,都不会影响外面的元素
- 如何触发BFC:
- float的值非none
- overflow的值非visible
- display的值为:inline-block、table-cell…
- position的值为:absoute、fixed
6、清除浮动有哪些方式?
- 触发BFC
- 多创建一个盒子,添加样式:clear: both;
- 常用:after方式,
ul:after{
content: ‘’;
display: block;
clear: both;
}
7、在网页中的应该使用奇数还是偶数的字体?为什么?
- 偶数:让文字在浏览器上表现更好看
- 另外说明:UI给前端一般设计图都是偶数的,这样不管是布局也好,转换PX也好,方便一点
8、position有哪些值?分别是根据什么定位的?
- static【默认】 没有定位
- fixed 固定定位,相对于浏览器的窗口进行定位
- relative 相对于自身定位,不脱离文档流(相对定位)
- absolute 相对于第一个有relative的父元素,脱离文档流(绝对定位)
- relative和absolute区别
- relative不脱离文档流,absolute脱离文档流
- relative相对于自身,absolute相对于第一个有relative的父元素
- relative如果有left、right、top、bottom == 》left、top
- absolute如果有left、right、top、bottom == 》left、right、top、bottom
9、写一个左中右布局占满屏幕,其中左、右两块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。
- 双飞翼布局
10、什么是CSS reset?
- reset.css 是一个css文件,重置CSS样式的(冗余,公司用的少)
- normalize.css 为了增强跨浏览器渲染的一致性,一个CSS重置库
11、css sprite是什么,有什么缺点
- 把多个小图标合并成一张大图片(雪碧图)
- 优点:减少了http请求的次数,提升了性能
- 缺点:维护比较差(例如图片位置进行修改或者内容宽高修改)
12、display: none;与visibility: hidden;的区别
- 占用位置的区别:
- display: none; 是不占位置的
- visibility: hidden; 虽然隐藏了,但是占位置
- 重绘和回流的问题
- display: none; visibility: hidden;都会产生重绘
- display: none; 还会产生一次回流
- 产生回流一定会造成重绘,但是重绘不一定会造成回流
- 产生回流的情况:改变元数据的位置(left、top…)、显示隐藏元素
- 产生重绘的情况:样式改变(backgroud、color…)
13、opacity 和rgba区别
- 共同性:实现透明效果
- opacity 取值范围0到1之间,0表示完全透明,1表示不透明
- rgba r表示红色,g表示绿色,b表示蓝色,取值可以在正整数或者百分数。a表示的透明性,也是在0到1之间
- 区别: opacity会继承父元素的opacity属性,而rgba设置的元素的后代元素不会继承不透明属性
14、line-height和height区别
- line-height是每一行文字的高,如果文字换行则整个盒子高度会增大(行数*行高)
- height是一个死值,就是这个盒子的高度
15、介绍一下CSS的盒子模型
- CSS的盒子模型有哪些:标准盒子模型、IE盒子模型
- CSS的盒子模型区别:
- 标准盒子模型:margin 、border、padding、content
- 计算:width + 左右padding +左右border
- IE盒子模型:margin、content(border + padding + content)
- 计算: width (假设width和左右padding宽度加一起一致,那么会额外加左右border的宽度)
- 标准盒子模型:margin 、border、padding、content
- 通过CSS如何转换盒子模型:
- box-sizing: content-box; 标准盒子模型
- box-sizing: border-box; IE盒子模型
16、flex
- flex-grow是如果有剩余空间,是否扩大,0为不扩大
flex-shrink是如果剩余空间不够,是否缩小,1为缩小
flex-basis为项目本身的大小,默认值是auto - flex: 1
- 对应的是1 1 0%, 相当于可扩大,可缩小,flex-basis为0%
- 解释:不管内容多少,一般都是平分空间,空间大小都一致
- flex: auto
- 对应的是1 1 auto, 相当于可扩大,可缩小,flex-basis为auto
- 解释: 是根据内容的大小来分,不是均分的(除非内容都是一样,才均分)
- flex: 0
- 对应的是0 1 0%, 相当于不可扩大,可缩小,flex-basis为0%
- 解释:不可扩大,可缩小,表现形式为最小内容宽度, 上图你可以看到div的宽度就是一个字的宽度
- flex: none
- 对应的是0 0 auto, 相当于不可扩大,不可缩小,flex-basis为auto
- 解释:不可扩大,不可缩小,内容本身的宽度是多少就是多少
三、JS
1、延迟加载JS有哪些方式?
- async:async是和html同步执行的,不是顺次执行JS脚本(谁先加载完就谁先执行)
- defer:等html全部解析完成,才会执行JS代码,顺次执行JS脚本的
2、JS数据类型有哪些?
- 基本类型:string、number、boolean、undefined、null、symbol
- 引用类型:object
3、JS数据类型考题
- NaN是一个数值类型,但是不是具体数字
- null是object类型
- 字符串加任何都是字符串 ‘1’+true = 1true
- 数字+Boolean是数字 1+true = 2
- typeof(NaN) 是 number
- typeof(undefined) 是 undefined
- typeof(null) 是 object
4、null和undefined的区别
- 作者在设计JS的时候都是先设计的null(为什么设计了null,因为借鉴了Java语言)
- null会被隐示转换为0,不容易发现错误
- 先有null后有undefined,出现undefined是为了填补之前的坑
- 具体区别:null是一个表示“无”的对象(空对象指针),转为数值为0;undefined是一个表示"无"的原始值,转为数值为NaN
5、== 和===有什么区别?
- ==:比较值
- ===:除了比较值还比较数据类型
- == 执行结果都是true
- string == number || Boolean…都会隐式转换,通过valueOf转换(方法是JavaScript后台运行的,不显示)
6、JS微任务和宏任务
- JS是单线程的语言
- JS代码执行流程:同步==》事件循环
- 同步的任务执行完了,才会执行事件循环,进入事件循环:请求、定时器、事件…
- 事件循环包含【宏任务、微任务】
- 微任务:promise.then
- 宏任务:setTimeout…
- 要执行宏任务的前提是清空了所有的微任务
- 流程:同步==》事件循环【宏任务、微任务】 -> 微任务 -> 宏任务 -> 微任务…
7、JS作用域考题
- 除了函数外,JS是没有块级作用域
- 作用域链:内部可以访问外部的变量,但是外部不能访问内部的变量
- 注意:如果内部有,优先查到内部,如果内部没有就查找外部
- 注意声明变量是var还是没有写(window. 全局变量)
- 注意:JS有变量提升的机制【变量悬挂声明】
- 优先级:声明变量 > 声明普通函数 > 参数 > 变量提升
- 面试的时候怎么看
- 本层作用域有没有此变量(注意变量会提升)
- 注意:JS除了函数外没有块级作用域
- 普通声明函数是不看写函数的时候顺序
8、JS对象考题
- JS对象注意点:
- 对象是通过new操作符构建出来的,所以对象直接不相等(除了引用外)
- 对象注意:引用类型(共用一个地址)
- 对象的key都是字符串类型
- 对象如何找属性|方法
- 先在对象本身找->构造函数中找->对象原型找->构造函数原型中找->对象上一层原型查找
- 考题
9、JS作用域+this指向+原型的考题
- 考题
10、JS判断变量是不是数组,你能写出哪些方法?
11、slice是干嘛的、splice是否会改变原数组
12、找出多维数组的最大值
13、给字符串新增方法实现功能
14、找出字符串出现最多次数的字符以及次数
15、new操作符具体做了什么
- 创建了一个空的对象
- 将空对象的原型,指向于构造函数的原型
- 将空对象作为构造函数的上下文(改变this指向)
- 对构造函数有返回值的处理判断
16、闭包
- 闭包是什么
- 闭包是一个函数加上到创建函数的作用域的连接,闭包“关闭”了函数的自有变量
- 闭包可以解决什么问题【闭包的优点】
- 内部函数可以访问到外部函数的局部变量
- 闭包的缺点
- 变量会驻留在内存中,造成内存损耗问题
- 解决:把闭包的函数设置为null
- 内存泄漏【ie低版本】
- 变量会驻留在内存中,造成内存损耗问题
17、原型链
- 原型可以解决什么问题
- 对象共享属性和共享方法
- 谁有原型
- 函数拥有prototype
- 对象拥有__proto__
- 对象查找属于或者方法的顺序
- 先在对象本身查找->到构造函数查找->对象的原型->构造函数的原型中->当前原型的原型中查找
- 原型链
- 是什么?就是把原型串联起来
- 原型链的最顶端是null
18、JS继承有哪些方式
- 方式一:ES6
- 方式二:原型链继承
- 优点:父类方法可以复用
- 缺点:引用类型的属性被所有实例共享,子类型实例不能给父类型构造函数传参
- 方式三:借用构造函数
- 优点:1.避免了引用类型的属性被所有实例共享、2.可以在子类构造函数中向父类传参数
- 缺点:方法都在构造函数中定义,每次创建实例都会创建一遍方法。
- 方式四:组合式继承
- 优点:融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。
19、call、apply、bind的区别
- 共同点:功能一致
- 可以改变this指向
- 语法 函数.call() 、函数.apply()、函数.bind()
- 区别
- call 、apply可以立即执行。bind不会立即执行,因为bind返回的是一个函数需要加入()执行
- 参数不同:apply第二个参数是数组。call和bind有多个参数需要挨个写
- 场景
- 其他可call
20、sort背后的原理是什么?
- v8引擎sort函数只给出了两种排序 InsertionSort和QuickSort,数量小于10的数组使用InsertionSort,比10大的数组使用QuickSort
- 之前的版本是:插入排序和快速排序,现在是冒泡排序
21、深拷贝和浅拷贝
- 共同点:复制
- 浅拷贝:只复制引用,而未复制真正的值
- 直接赋值
- Object.assign 方法
- ES6 扩展运算符
- jQuery 中的 $.extend
- 直接赋值
- 深拷贝:是复制真正的值(不同引用)
- JSON.parse(JSON.stringify(待拷贝对象)) ,但是这种方式有一个缺点,那就是里面的函数无法被拷贝。
- 手写递归的方式来实现深拷贝!
- jQuery 中的 $.extend,上面已经说过了,加上true就可以实现深浅拷贝
- JSON.parse(JSON.stringify(待拷贝对象)) ,但是这种方式有一个缺点,那就是里面的函数无法被拷贝。
22、localStorage、sessionStorage、cookie的区别
- 公共点:在客户端存放数据
- 区别
- 数据存放的有效期
- sessionStorage:仅在当前浏览器窗口关闭之前有效,关闭就没了
- localStorage:始终有效,窗口或者浏览器关闭也一直保存,所以叫持久化存储
- cookie:只在设置的cookie过期时间之前有效,即使窗口或者浏览器关闭也有效
- localStorage、sessionStorage不可以设置过期时间,cookie有过期时间,可以设置过期(把时间调整到之前的时间)
- 存储大小的限制
- cookie存储量不能超过4K
- localStorage、sessionStorage不能超过5M
- 根据不同的浏览器存储大小是不同的
- 数据存放的有效期
四、H5C3
1、什么是语义化标签
- 易读性和维护性更好
- seo成分会更好,蜘蛛抓取会更好
- IE8不兼容HTML5标签的。解决:可以通过html5shiv.js去处理
2、::before和:after中双冒号和单冒号有什么区别?解释一下这2个伪元素的的作用
- 区别
- :是伪类,::伪元素 是为了做区分
- 是什么?作用
- 元素 before之前,元素after之后
- 作用:清除浮动、样式布局上也有作用
3、如何关闭IOS键盘首字母自动大写
4、怎么让Chrome支持小于12px的文字?
- Chrome默认字体大小是12px(不同浏览器不同)
5、rem和em的区别
- 相对于font-size
- em针对于父元素的font-size
- rem针对于根(html)元素的font-size
6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉?
7、webkit表单输入框placehold颜色值能修改吗?
8、禁止ios长按时触发系统的菜单,禁止ios&Android长按时下载图片
9、禁止ios和Android用户选中文字
10、自适应
- 淘宝无限适配【移动端】:淘宝无限适配+布局单位使用rem
11、响应式
- 是什么
- 一个url响应多端
- 语法结构
- 响应式图片【性能优化】
12、网页布局方案
- 什么情况下采用自适应布局
- 数据不是特别多,用户量不是特别大,纯展示类项目适合响应式布局,例如公司的官网、专题页面
- 特别追求性能的项目,不太适合响应式,因为如果添加了很多响应式会造成加载速度变慢
- pc+移动端应该做什么样的布局方案
- 注意: 访问量还可以或者比较大,类似淘宝网
- pc是一套,会加入一点点响应式,移动端是一套,会使用自适应的布局方式
- pc的设计图
- ui:1980,笔记本电脑:1280,UI图的宽度和电脑宽度不对应该怎么办
- 把UI图进行等比缩放,缩放成和电脑一样的尺寸
- 换1980电脑
- ui:1980,笔记本电脑:1280,UI图的宽度和电脑宽度不对应该怎么办
- 移动端的设计图
- 宽度:750,因为750设计图/2就是375,正好是iPhone6尺寸,把iPhone6座位基准点
五、ES6
1、var、let、const区别
- 共同点都是可以声明变量
- 区别
- var具有变量提升的机制,let和const没有变量提升机制
- var可以多次声明同一个变量,let和const不可以多次声明同一个变量
- var、let声明变量的、const声明常量
- var和let声明的变量可以再次赋值,但是const不可以再次赋值
- var声明的变量没有自身作用域,let和const声明的变量有自身的作用域
2、作用域考题
- 考题二
- 可以修改
3、将下列对象进行合并
4、箭头函数&普通函数有什么区别?
- this指向的问题
- 箭头函数中的this是在箭头函数定义时就决定了,而且是不可修改的(call、apply、bind)
- 箭头函数的this指向定义的时候,外层第一个普通函数的this
- 箭头函数中的this是在箭头函数定义时就决定了,而且是不可修改的(call、apply、bind)
- 箭头函数不能new(不能当做构造函数)
- 箭头函数没有prototype
- 箭头函数没有arguments
5、promise有几种状态
- 三种状态:pending进行中、fulfilled已成功、rejected已失败
6、find和filter的区别
- 区别一:返回的内容不同
- filter返回是新数组
- find返回具体的内容
- 区别二:
- find:匹配到第一个即返回
- filter:返回整体(每一个匹配到的都返回)
7、some和every的区别
- some如果有一项匹配则返回true
- every全部匹配才会返回true
8、forEach、for in、for of、set、map区别
- for in:可以遍历对象,可以遍历出数组的原型对象,可以遍历出数组的属性,遍历出来的值是key,不可以遍历set/map,不可以遍历具有iterator的数据对象,ie支持,推荐循环对象时用in
- for of:不可以遍历对象,不可以遍历出数组的原型对象,不可以遍历出自身的属性,遍历出来的值是value,可以遍历set/map,遍历具有iterator的数据对象 ,ie不支持,推荐循环数组时用of
- Set:任何类型,唯一值
- Map:键值对,记住插入顺序,任意值作为键
- map:返回一个处理后的新数组,不改变原来数组的值。
- forEach:没有返回值,不能确保数组的不变性。
六、VUE
1、vue生命周期
- 系统自带8个生命周期
- beforeCreate、created、beforeMount、mounted、beforeUpdate、update、beforeDestroy、destroyed
- 一旦进入页面或者组件,会执行哪些生命周期,顺序。
- beforeCreate、created、beforeMount、mounted
- 在哪个阶段会有data
- beforeCreate 啥也没有
- created 有data没有el
- beforeMount 有data没有el
- mounted 都有
- 加入keep-alive生命周期多了2个
- activated
- deactivated
- 如果加入了keep-alive,第一次进入组件会执行哪些生命?
- beforeCreate、created、beforeMount、mounted、activated
- 如果加入了keep-alive,第二次或者地N次进入组件会执行哪些生命周期?
- 只执行一个生命周期:activated
- 加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted - 更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated - 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
2、谈谈你对keep-alive的了解
- 是vue系统自带的一个组件,功能:用来缓存组件的,提示性能
- 使用场景
- 就是来缓存组件,提升项目的性能
3、v-if和v-show区别
- 展示形式不同
- v-if创建一个dom节点
- v-show是display:none、block
- 使用场景不同
- 初次加载v-if要比v-show好,页面不会做加载盒子
- 频繁切换v-show要比v-if好,创建和删除的开销太大了,显示和隐藏开销较小
4、 v-if和v-for优先级
- v-for的优先级比v-if高
- 是在源码体现:function genElement
5、ref是什么?
- 来获取dom的
6、nextTick是什么?
- 获取更新后的dom内容
7、scoped原理
- 作用:让样式在本组件中生效,不影响其他组件
- 原理:给节点新增自定义属性,然后css根据属性选择器添加样式
8、vue中如何做样式穿透
9、vue的组件通讯
- 方式一:props/$emit
- 方式二:on
- var Event=new Vue();
Event.on(事件名,data => {});
- var Event=new Vue();
- 方式三:vuex
- 通过vue的this.store.state.count
- 修改:this.$store.commit(‘countAdd’,num)
- 方式四:listeners
- attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
- listeners" 传入内部组件
- 方式五:provide/inject
- 方式六:$parent / $children与 ref
- 无法在跨级或兄弟间通信
10、computed、methods、watch有什么区别?
- computed vs methods区别
- computed是有缓存的
- methods没有缓存
- computed vs watch区别
- watch是监听,数据或者路由发生了改变才可以响应(执行)
- computed计算某一个属性的改变,如果某一个值改变了,计算属性会监听到进行返回
- watch是当前监听到了数据改变了,才会执行内部代码
11、props和data优先级谁高?
- props -> methods -> data -> computed -> watch
12、vuex有哪些属性?
- State:类似组件中data,存放数据
- Getters:类似于组件中computed
- Mutations:类似组件中methods
- Actions:提交Mutations的
- Modules:把以上4个属性再细分,让仓库更好管理
- Mutations和Actions区别
- Mutations:都是同步事物
- Actions:可以包含任意异步操作
13、vuex是单向数据流还是双向数据流?
- vuex是单向数据流
- 只能通过Mutations来改变
14、vuex如何做到持久化存储
- vuex本身不是持久化存储
- 使用localStorage自己写
- 使用 npm install --save vuex-persist插件
15、vue路由history、hash
- hash:路由上有#,不会发请求,hash变化会触发页面跳转,即浏览器的前进、后退,hash变化不会刷新页面,不会提交到server端
- 原理: 浏览器地址栏url的hash值发生变化时,触发onhashchange事件
- 再通过window.location.hash获取到hash值,然后进行相应的处理去除#
- 再将url和相应的组件函数进行映射,根据不同的hash值执行不同的回调函数
- 加载相应的组件来实现页面跳转 window.onhashchange = (event)=> {}
- history:会发请求,跳转时不刷新页面
- 原理:将url通过pushState()或replaceState()填入到history和地址栏中
- 再通过onpopstate事件响应执行相应的回调函数,实现前端组件间的切换
- 区别
16、介绍一下SPA以及SPA有什么缺点
- SPA是什么?单页面应用
- 缺点
- seo优化不好
- 性能不是特别好
17、vue路径传值
- 显式,query
- 隐示,params
18、路由导航守卫有哪些
- 全局
- 路由独享
- 组件内
19、vue动态路由
- 场景:详情页(文章、商品)
20、双向绑定原理
- 通过object.defineProperty劫持数据发生的改变 + 发布者订阅者模式,它能检测到属性的变化,如果数据发生改变了(在set中进行赋值的),就通知dom更改数据。
- vue3是通过proxy来实现数据劫持的,因为defineProperty拦截单纯的对象的key的值,而proxy它可以拦截对象,数组几乎一切对象包装类型,但是 Proxy 没法兼容 IE,所以 Vue3.0 底层还是采用 Object.defineProperty
- 发布订阅模式需要三种角色,发布者、调度中心和订阅者,二者是解耦的
- 观察者模式需要两种角色,观察者和被观察者,耦合在一起
21、diff算法
- 功能:提升性能
- 虚拟dom ->其实就是数据(把dom数据化)
七、HTTP
1、浏览器输入url发生了什么
- 首先,浏览器会对url进行解析,拿到协议、域名、query请求参数等
- 因为浏览器并不能直接通过域名找到对应的服务器,所以需要根据域名进行dns解析,找到服务端ip地址
- 知道服务器的ip地址后,浏览器所处的客户端与服务端进行tcp三次握手,来建立可靠的网络连接,确保后续双方能正常接收/发送http请求
- 浏览器根据http协议,向服务端发送http请求报文
- 服务端收到请求后,程序会进行数据处理,得到客户端所需要的数据
- 服务端根据http协议,将客户端所需的数据打包成http响应报文,发送给客户端
- 客户端会对收到的数据进行加工,进行页面渲染,最后,页面就有变化了
2、三次握手
- 第一次握手 (SYN=1, seq=x),发送完毕后,客户端进入 SYN_SEND 状态
- 第二次握手 (SYN=1, ACK=1, seq=y, ACKnum=x+1), 发送完毕后,服务器端进入 SYN_RCV 状态。
- 第三次握手 (ACK=1,ACKnum=y+1),发送完毕后,客户端进入 ESTABLISHED 状态,当服务器端接收到这个包时
八、微前端
1、主子应用通讯
- qiankun内部提供了iniGlobalState方法用于注册MicroAppStateActions用于通信,该实例有3个方法分别是:
- setGlobalState:设置globalState设置新值时,内部将执行浅检查,如果检查到globalState发生改变则触发通知,通知到所有的观察者函数
- onGlobalStateChange:注册观察者函数,响应globalState变化,在globalState发生改变时出发该观察者函数
- offGlobalStateChange:取消观察者函数,该实例不再响应globalState变化
2、主子应用样式隔离
- 设置sandbox
- 设置css prefix
九、小程序
十、vue3
十一、webpack
1、webpack优化构建速度
- 可用于生产环境
- 优化babel- loader(使用include和exclude来明确范围)
- lgnorePlugin(避免引用无用模块),不引入,代码中没有
- 优化babel- loader(使用include和exclude来明确范围)
- 不用于生产环境
- 自动刷新
- 配置了devServer时会默认开启此功能,无需自己配置watch
- noParse(避免重复打包,如react.min.js这种文件是采用模块化处理过的)引入,但不打包
- happyPack(多进程打包)
- ParallelUglifyPlugin(多进程压缩js)
- 热更新
- DllPlugin(动态链接库插件)
- 配置了devServer时会默认开启此功能,无需自己配置watch
- 自动刷新
十二、在项目中做过的复杂的功能
1、放在低代码平台实现的拓展wang富文本图片预览功能
- 1、在富文本组件里面根据dom节点获取到图片元素
2、在图片元素上绑定双击事件
3、双击事件触发图片预览图层子组件的显示功能,子组件里面用了el-image组件的图片预览功能
4、通过ref获取到图片组件的实例,调用源码里面的viewer属性将预览图层打开