前言
这一个我学习前端面试题的笔记。

一、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、一个盒子不给宽度和高度如何水平垂直居中?

image-1649229659156

  • 方式一:
    .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
  • 块内元素居中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

详细: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的宽度)
  • 通过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、== 和===有什么区别?

  • ==:比较值
  • ===:除了比较值还比较数据类型
    image-1649329078698
  • == 执行结果都是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都是字符串类型
    • 对象如何找属性|方法
      • 先在对象本身找->构造函数中找->对象原型找->构造函数原型中找->对象上一层原型查找
  • 考题
    • image-1649385294993
    • image-1649385311453
    • image-1649409925431

9、JS作用域+this指向+原型的考题

  • 考题
    • image-1649416990637
    • image-1649417185499
    • image-1649417433464
    • image-1649417667534

10、JS判断变量是不是数组,你能写出哪些方法?

  • image-1652321350531

11、slice是干嘛的、splice是否会改变原数组

  • image-1649421466284

12、找出多维数组的最大值

  • image-1649421670182

13、给字符串新增方法实现功能

  • image-1649422290596

14、找出字符串出现最多次数的字符以及次数

  • image-1649423592983image-1649423668323

15、new操作符具体做了什么

  • 创建了一个空的对象
  • 将空对象的原型,指向于构造函数的原型
  • 将空对象作为构造函数的上下文(改变this指向)
  • 对构造函数有返回值的处理判断
  • image-1649515988133

16、闭包

  • 闭包是什么
    • 闭包是一个函数加上到创建函数的作用域的连接,闭包“关闭”了函数的自有变量
  • 闭包可以解决什么问题【闭包的优点】
    • 内部函数可以访问到外部函数的局部变量
    • image-1649516957164
  • 闭包的缺点
    • 变量会驻留在内存中,造成内存损耗问题
      • 解决:把闭包的函数设置为null
    • 内存泄漏【ie低版本】

17、原型链

  • 原型可以解决什么问题
    • 对象共享属性和共享方法
  • 谁有原型
    • 函数拥有prototype
    • 对象拥有__proto__
  • 对象查找属于或者方法的顺序
    • 先在对象本身查找->到构造函数查找->对象的原型->构造函数的原型中->当前原型的原型中查找
  • 原型链
    • 是什么?就是把原型串联起来
    • 原型链的最顶端是null

18、JS继承有哪些方式

  • 方式一:ES6
    • image-1649641773030
  • 方式二:原型链继承
    • image-1649641971727
    • 优点:父类方法可以复用
    • 缺点:引用类型的属性被所有实例共享,子类型实例不能给父类型构造函数传参
  • 方式三:借用构造函数
    • image-1649642073829
    • 优点:1.避免了引用类型的属性被所有实例共享、2.可以在子类构造函数中向父类传参数
    • 缺点:方法都在构造函数中定义,每次创建实例都会创建一遍方法。
  • 方式四:组合式继承
    • image-1649642252308
    • 优点:融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。

19、call、apply、bind的区别

  • 共同点:功能一致
    • 可以改变this指向
    • 语法 函数.call() 、函数.apply()、函数.bind()
  • 区别
    • call 、apply可以立即执行。bind不会立即执行,因为bind返回的是一个函数需要加入()执行
    • 参数不同:apply第二个参数是数组。call和bind有多个参数需要挨个写
  • 场景
    • image-1649643858362
    • image-1649643867243
    • 其他可call

20、sort背后的原理是什么?

  • v8引擎sort函数只给出了两种排序 InsertionSort和QuickSort,数量小于10的数组使用InsertionSort,比10大的数组使用QuickSort
  • 之前的版本是:插入排序和快速排序,现在是冒泡排序

21、深拷贝和浅拷贝

  • 共同点:复制
  • 浅拷贝:只复制引用,而未复制真正的值
    • 直接赋值image-1655363762844
    • Object.assign 方法image-1649659550788
    • ES6 扩展运算符 image-1655363876673
    • jQuery 中的 $.extend image-1655363949357
  • 深拷贝:是复制真正的值(不同引用)
    • JSON.parse(JSON.stringify(待拷贝对象)) ,但是这种方式有一个缺点,那就是里面的函数无法被拷贝。image-1649659764167
    • 手写递归的方式来实现深拷贝!image
    • jQuery 中的 $.extend,上面已经说过了,加上true就可以实现深浅拷贝

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键盘首字母自动大写

image-1649677162823

4、怎么让Chrome支持小于12px的文字?

  • Chrome默认字体大小是12px(不同浏览器不同)
  • image-1649677398024

5、rem和em的区别

  • 相对于font-size
    • em针对于父元素的font-size
    • rem针对于根(html)元素的font-size

6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉?

image-1649677824268

7、webkit表单输入框placehold颜色值能修改吗?

image-1649677909869

8、禁止ios长按时触发系统的菜单,禁止ios&Android长按时下载图片

image-1649678199392

9、禁止ios和Android用户选中文字

image-1649678176433

10、自适应

  • 淘宝无限适配【移动端】:淘宝无限适配+布局单位使用rem

11、响应式

  • 是什么
    • 一个url响应多端
  • 语法结构
    • image-1649679057232
  • 响应式图片【性能优化】
    • image-1649679423856

12、网页布局方案

  • 什么情况下采用自适应布局
    • 数据不是特别多,用户量不是特别大,纯展示类项目适合响应式布局,例如公司的官网、专题页面
    • 特别追求性能的项目,不太适合响应式,因为如果添加了很多响应式会造成加载速度变慢
  • pc+移动端应该做什么样的布局方案
    • 注意: 访问量还可以或者比较大,类似淘宝网
    • pc是一套,会加入一点点响应式,移动端是一套,会使用自适应的布局方式
  • pc的设计图
    • ui:1980,笔记本电脑:1280,UI图的宽度和电脑宽度不对应该怎么办
      • 把UI图进行等比缩放,缩放成和电脑一样的尺寸
      • 换1980电脑
  • 移动端的设计图
    • 宽度: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、作用域考题

  • image-1649746480870
  • 考题二 image-1649746597483
  • 可以修改 image-1649746697330

3、将下列对象进行合并

  • image-1649746815612
  • image-1649746847287
  • image-1649746957159

4、箭头函数&普通函数有什么区别?

  • this指向的问题
    • 箭头函数中的this是在箭头函数定义时就决定了,而且是不可修改的(call、apply、bind)
      • 箭头函数的this指向定义的时候,外层第一个普通函数的this
  • 箭头函数不能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
  • 在哪个阶段会有el、在哪个阶段有el、在哪个阶段有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中如何做样式穿透

  • image-1649767752058
  • image-1649767762710

9、vue的组件通讯

  • 方式一:props/$emit
  • 方式二:emit/emit/on
    • var Event=new Vue();
      Event.emit(事件名,数据);Event.emit(事件名,数据); Event.on(事件名,data => {});
  • 方式三:vuex
    • 通过vue的this.store来获得statethis.store来获得state,this.store.state.count
    • 修改:this.$store.commit(‘countAdd’,num)
  • 方式四:attrs/attrs/listeners
    • attrs:包含了父作用域中不被prop所识别(且获取)的特性绑定(classstyle除外)。当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定(classstyle除外),并且可以通过vbind="attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
    • listeners:包含了父作用域中的(不含.native修饰器的)von事件监听器。它可以通过von="listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="listeners" 传入内部组件
  • 方式五:provide/inject
    • image-1655095578955
  • 方式六:$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事件响应执行相应的回调函数,实现前端组件间的切换
  • 区别
    • image-1650623585356

16、介绍一下SPA以及SPA有什么缺点

  • SPA是什么?单页面应用
  • 缺点
    • seo优化不好
    • 性能不是特别好

17、vue路径传值

  • 显式,queryimage-1650623878716
  • 隐示,params

18、路由导航守卫有哪些

  • 全局 image-1650624096632
  • 路由独享image-1650624105557
  • 组件内image-1650624112285

19、vue动态路由

  • 场景:详情页(文章、商品)
  • image-1650627629946

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来明确范围)
      image-1655109534796
    • lgnorePlugin(避免引用无用模块),不引入,代码中没有
      image-1655109552037
  • 不用于生产环境
    • 自动刷新
      • 配置了devServer时会默认开启此功能,无需自己配置watch
        image-1655109671932
      • noParse(避免重复打包,如react.min.js这种文件是采用模块化处理过的)引入,但不打包
        image-1655109813967
      • happyPack(多进程打包)
        image-1655109860881
      • ParallelUglifyPlugin(多进程压缩js)
        image-1655110009267
      • 热更新
        image-1655110053054
      • DllPlugin(动态链接库插件)
        image-1655110151796

十二、在项目中做过的复杂的功能

1、放在低代码平台实现的拓展wang富文本图片预览功能

  • 1、在富文本组件里面根据dom节点获取到图片元素
    2、在图片元素上绑定双击事件
    3、双击事件触发图片预览图层子组件的显示功能,子组件里面用了el-image组件的图片预览功能
    4、通过ref获取到图片组件的实例,调用源码里面的viewer属性将预览图层打开