一、
1、说一说HTML语义化？
标签语义化是指在开发时尽可能使用有语义的标签，比如header，footer，h，p，少使用无语义如div
为什么要语义化？ ①代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构 ②有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息 ③提升用户体验： 例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。 ④便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。 ⑤方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
2****、说一说盒模型？
css盒子的组成包括margin、border、padding、content； 盒子模型一共两种：标准盒模型（content-box）、怪异盒模型（border-box）； 标准盒模型在设置width和height时设置的是content的大小，盒子的大小还要加上padding、border； 怪异盒模型设置width和height时设置的是盒子的大小，会压缩content区域
3****、说一下浮动？
关于浮动：
浮动的作用：常用于图片，可以实现文字环绕图片
浮动的特点：脱离文档流，容易造成盒子塌陷，影响其他元素的排列
解决塌陷问题：①父元素中添加overflow：hidden;
②给父元素添加高度。
③建立空白div，添加clear
④在父级添加伪元素::after{ content : ‘ ‘, clear : both , display : table}
4****、说一说样式优先级的规则是什么？
!important > 行内样式> id选择器> 类选择器>标签选择器> 通配符选择器 > 浏览器继承
5、说一说CSS尺寸设置的单位
①css一共有五个长度单位，分别是px，em，rem，vw，vh
②除了px是绝对单位，其他都是相对单位。
③em相对于自身大小（但在font-size中相对于父元素字体大小）
④rem相对于根元素的字体大小
⑤vw相对于可视化窗口的宽（1vw就是1%可视化窗口宽度）
⑥vh相对于可视化窗口的高（1vh就是1%可视化窗口高度）
⑦一般采用rem+媒体查询或者rem+vw来实现响应式布局。原理是当窗口大小发生变化时，通过媒体查询或者vw改变根元素的字体大小，从而改变以rem为单位的元素大小
6****、说一说BFC
BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
【什么情况下可以让元素产生BFC】
1、float属性不为none
2、position为absolute或fixed
3、display为inline-block、table-cell、table-caption、flex、inline-flex
4、overflow不为visible
【BFC元素具有的特性】
1、在BFC中，盒子从顶部开始垂直地一个接一个排列
2、盒子垂直方向的距离由margin决定。同一个BFC的两个相邻盒子margin会重叠
3、BFC中，margin-left会触碰到border-left（对于从左至右的方式，反之）
4、BFC区域不会与浮动的盒子产生交集，而是紧贴边缘浮动
5、计算BFC高度时，自然会检测浮动的盒子高度
【主要用途】
1、清除内部浮动，父元素设置为BFC可以清除子元素的浮动（最常用overflow:hidden，IE6需加上*zoom:1）：计算BFC高度时会检测浮动子盒子高度
2、解决外边距合并问题
3、右侧盒子自适应：BFC区域不会与浮动盒子产生交集，而是紧贴浮动边缘
7****、说几个未知宽高元素水平垂直居中方法
未知宽高元素水平垂直都居中的实现方法：
- 设置元素相对父级定位
position:absolute;left:50%;right:50%，让自身平移自身高度50%transform: translate(-50%,-50%);，这种方式兼容性好，被广泛使用的一种方式 - 设置元素的父级为弹性盒子
display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center，这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中 - 设置元素的父级为网格元素
display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center，这种方式代码简介，但是兼容性ie 10以上支持 - 设置元素的父级为表格元素
display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle;，设置子元素为行内块display: inline-block;，这种方式兼容性较好
8****、说一说三栏布局的实现方案
三栏布局，要求左右两边盒子宽度固定，中间盒子宽度自适应，盒子的高度都是随内容撑高的，一般都是中间盒子内容较多，为了保证页面渲染快，在写结构的时候，需要把中间盒子放在左右盒子的前面。 实现三栏布局的方法通常是圣杯布局和双飞翼布局。
圣杯布局的实现方案：三个元素放在同一个父级元素中，代表中间盒子的元素放在最前面，父级盒子设置左右padding，三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度，设置左边盒子左边距-100%同时相对自身定位，右边平移自身宽度，右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开
双飞翼布局的实现方案：三个盒子对应三个元素，其中中间盒子套了两层，中间盒子内部盒子设置margin,三个盒子全部浮动，设置中间盒子宽度100%，左右盒子设置固定宽度,设置左边盒子左边距-100%,右边盒子设置右边距-自身宽度，最后设置父级盒子清除浮动，否则父级盒子的高度无法被撑开
加分回答 圣杯布局: - 优点：不需要添加dom节点 - 缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，当middle部分的宽小于left部分时就会发生布局混乱。 双飞翼布局： - 优点：不会像圣杯布局那样变形，CSS样式代码更简洁 - 缺点：多加了一层dom节点
*9、说一说JS*数据类型有哪些,**区别是什么？
原始数据类型：number、string、boolean、undefined、null、symbol、bigint
引用数据类型：object（包括Array，Function、Object类等） 区别：前七中原生数据类型的存放在栈中，引用数据类型存放在堆中，它的地址在栈中，一般我们访问就是它的地址
10****、说一说null 和 undefined 的区别，如何让一个属性变为null
null表示一个值被定义了，但是是空值，但是undefined表示未被定义。null和undefined在if判断中都会被解析为false，但是在用Number运算时，null的结果为0，undefined的结果为NaN，让属性变为null就需要先定义，再赋空值。
11、说一说JavaScript有几种方法判断变量的类型？
typeof、instanceof、Object.prototype.toString.call()（对象原型链判断方法）、 constructor (用于引用数据类型)
typeof：常用于判断基本数据类型，对于引用数据类型除了function返回’function‘，其余全部返回’object’。
instanceof：主要用于区分引用数据类型，检测方法是检测的类型在当前实例的原型链上，用其检测出来的结果都是true，不太适合用于简单数据类型的检测，检测过程繁琐且对于简单数据类型中的undefined, null, symbol检测不出来。 constructor：用于检测引用数据类型，检测方法是获取实例的构造函数判断和某个类是否相同，如果相同就说明该数据是符合那个数据类型的，这种方法不会把原型链上的其他类也加入进来，避免了原型链的干扰。 Object.prototype.toString.call()：适用于所有类型的判断检测，检测方法是Object.prototype.toString.call(数据) 返回的是该数据类型的字符串。
12****、说一说数组去重都有哪些方法？
1.new Set():
let array = […new Set(arr)]
2.indexOf:
if(array.indexOf(arr[i]) == -1){ array.push(arr[i])}
或者 arr5.filter((item, index, self) => {return self.indexOf(item) === index})
3.使用reduce+includes：
return arr.reduce((prev,curr) => prev.includes(curr) ? prev : […prev,curr],[])
13****、说一说伪数组和数组的区别？
- 伪数组的特点： 伪数组它的类型不是Array，而是Object，而数组类型是Array。不能使用数组方法、可以获取长度、可以使用for in遍历
- 伪数组可以装换为数组的方法：a. Array.prototype.slice.call() b.Array.from() c. […伪数组]
- 有哪些是伪数组：函数的参数arguments，Map和Set的keys()、values()和entires()
14****、说一说map 和 forEach 的区别？
map有返回值，可以开辟新空间，return出来一个length和原数组一致的数组，即便数组元素是undefined或者是null。forEach默认无返回值，返回结果为undefined，可以通过在函数体内部使用索引修改数组元素。
map的处理速度比forEach快，而且返回一个新的数组，方便链式调用其他数组新方法
15、说一说es6中箭头函数？
箭头函数相比于普通函数写法更简明和快捷，但二者也有所不同。箭头函数没有this，this继承于外部执行上下文的this，由于没有this，因此箭头函数也不能作为构造函数。同时，使用call(),bind(),apply()时只能传递参数，不能绑定this。箭头函数没有argument，也没有原型和super，没有yield关键字，因此也不能作generator函数。
*16***、事件扩展符用过吗(…)**，什么场景下？
1.数组去重[…new Set(arr)] 2.数组拷贝[…arr] 3.伪数组转真数组 […伪数组]
17****、说一说你对闭包的理解？
- 概念：函数嵌套函数，里部变量能访问外部变量，这个变量称为自由变量 2. 解决的问题：保存变量 3. 带来的问题：会造成内存泄漏问题 4. 闭包的应用：防抖节流
18、说一说JS变量提升？
函数和var声明的变量会有变量提升，js在预编译阶段会将函数和var声明的变量提升至最前面先执行，之后再按顺序执行代码块进行赋值，而let和const声明的变量只是创建提升，在预编译中将其创建，形成暂时性死区，不能提前访问和调用变量，只能在赋值之后进行调用和访问
19、说一说this指向（普通函数、箭头函数）？
普通函数执行指向window，箭头函数中的this指向上一级作用域中的this。构造函数的this指向实例对象
20、说一说call apply bind的作用和区别？
首先，call apply bind三个方法都可以用来改变函数的this指向，具体区别如下：
1、fn.call (newThis,params) call函数的第一个参数是this的新指向，后面依次传入函数fn要用到的参数。会立即执行fn函数。
2、fn.apply (newThis,paramsArr) apply函数的第一个参数是this的新指向,第二个参数是fn要用到的参数数组，会立即执行fn函数。
3、fn.bind (newThis,params) bind函数的第一个参数是this的新指向，后面的参数可以直接传递，也可以按数组的形式传入。 不会立即执行fn函数，且只能改变一次fn函数的指向，后续再用bind更改无效。返回的是已经更改this指向的新fn
21、说一说js继承的方法和优缺点？
1.原型链继承，优点：简单实现继承，缺点：所有实例共享原型对象的属性和方法，且无法进行参数的传递
2.构造函数继承，优点：避免了原型对象的属性和方法被实例共享，且可以传递参数 缺点：每次创建实例都需要创建一遍方法
3.组合继承，优点：结合原型链继承和构造函数继承的优点 缺点：无论什么情况下，都会调用两次父级构造函数，一次在创建子级原型的时候，另一次在子级构造函数内部
4.原型式继承，优点：不需要单独创建构造函数 缺点：和原型链继承相似
5.寄生式继承，优点：不改变父类的情况下，增强对象 缺点：和构造函数继承相似
6.寄生组合式继承，优点：结合组合继承和寄生式继承的优点，不需要调用两次父级构造函数 缺点：代码复杂
22、说一说new会发生什么？
- 创建一个新对象
- 将新对象的__proto__（原型）指向构造函数的prototype（原型对象）
- 构造函数绑定新对象的this并执行返回结果
- 判断返回结果是否为null，如果为null,返回新对象，否则直接返回执行结果。
23、说一说defer和async****区别？
html文件都是按顺序执行的，script标签中没有加defer和async时，浏览器在解析文档时遇到script标签就会停止解析阻塞文档解析，先加载JS文件，加载完之后立即执行，执行完毕后才能继续解析文档。 而在script标签中写入defer或者async时，就会使JS文件异步加载，即html执行到script标签时，JS加载和文档解析同时进行，而async是在JS加载完成后立即执行JS脚本，阻塞文档解析，而defer则是JS加载完成后，在文档解析完成后执行JS脚本
24、说一说promise是什么与使用方法？
promise是一种异步编程，是为了解决回调地狱，让代码看起来更加优雅。promise存在三种状态pending，fulfilled，rejected，基本使用方法是new Promise((resolve,rejected)=>{}).then(res=>{}).catch(err=>{});调用resolve()会执行then部分，出现错误会执行catch部分
25、说一说JS实现异步的方法？
回调函数、事件监听、setTimeout（定时器）、Promise、async/await，generator生成器
26****、说一说cookie sessionStorage localStorage 区别？
Cookie、SessionStorage、 LocalStorage都是浏览器的本地存储。 它们的共同点：都是存储在浏览器本地的 它们的区别：cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。
Cookie一般用于存储登录验证信息SessionID或者token，LocalStorage常用于存储不易变动的数据，减轻服务器的压力，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。
27、说一说如何实现可过期的localstorage数据？
一种是惰性删除：惰性删除是指获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。 另一种是定时删除：每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。LocalStorage清空应用场景：token存储在LocalStorage中，要清空
28****、说一下token 能放在cookie****中吗？
理论上能。 token一般是用来判断用户是否登录的，它内部包含的信息有：uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token 的前几位以哈希算法压缩成的一定长度的十六进制字符串） token可以存放在Cookie中，token 是否过期，应该由后端来判断，不该前端来判断，所以token存储在cookie中只要不设置cookie的过期时间就ok了，如果 token 失效，就让后端在接口中返回固定的状态表示token 失效，需要重新登录，再重新登录的时候，重新设置 cookie 中的 token 就行。
token认证流程 1. 客户端使用用户名跟密码请求登录 2. 服务端收到请求，去验证用户名与密码 3. 验证成功后，服务端签发一个 token ，并把它发送给客户端 4. 客户端接收 token 以后会把它存储起来，比如放在 cookie 里或者 localStorage 里 5. 客户端每次发送请求时都需要带着服务端签发的 token（把 token 放到 HTTP 的 Header 里） 6. 服务端收到请求后，需要验证请求里带有的 token ，如验证成功则返回对应的数据
但容易产生csrf问题
29、说一说axios的拦截器原理及应用？
1.拦截器分为 请求（request）拦截器和 响应（response）拦截器。
2.请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）。
3.返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）
4.拦截器原理：创建一个chn数组，数组中保存了拦截器相应方法以及dispatchRequest（dispatchRequest这个函数调用才会真正的开始下发请求），把请求拦截器的方法放到chn数组中dispatchRequest的前面，把响应拦截器的方法放到chn数组中dispatchRequest的后面，把请求拦截器和相应拦截器forEach将它们分unshift,push到chn数组中，为了保证它们的执行顺序，需要使用promise，以出队列的方式对chn数组中的方法挨个执行。
30、说一说创建ajax过程？
- 创建XHR对象：new XMLHttpRequest() 2. 设置请求参数：request.open(Method, 服务器接口地址); 3. 发送请求: request.send()，如果是get请求不需要参数，post请求需要参数request.send(data) 4. 监听请求成功后的状态变化：根据状态码进行相应的处理。 XHR.onreadystatechange = function () { if (XHR.readyState == 4 && XHR.status == 200) { console.log(XHR.responseText); // 主动释放,JS本身也会回收的 XHR = null; } };
二、
1、说一下fetch 请求方式？
fetch 是 XMLHttpRequest 的一种替代方案，fetch是js原生语法也能像ajax一样获取后台数据
优点： - 基于标准Promise实现，支持async/ await - 语法简洁，更加语意化fetch 可以理解成简化版的 XMLHttpRequest
缺点： - 兼容性不好，不支持IE
2****、说一下有什么方法可以保持前后端实时通信？
1.轮询、长轮询、 iframe流、WebSocket、SSE
2.轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。
3.长轮询是对轮询的改进版，客户端发送HTTP给服务器之后，如果没有新消息，就一直等待。有新消息，才会返回给客户端。
4.iframe流方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间创建一条长连接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。
- WebSocket是类似Socket的TCP长连接的通讯模式，一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。
6.SSE(Server-Sent Event)是建立在浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。
7.应用：
轮询适用于：小型应用，实时性不高
长轮询适用于：一些早期的对及时性有一些要求的应用：web IM 聊天
iframe适用于：客服通信等
WebSocket适用于：微信、网络互动游戏等
SSE适用于：金融股票数据、看板等
3、说一下浏览器输入URL****发生了什么？
- url解析：判断是搜索内容还是请求URL
- 查找本地缓存：如果有缓存直接返回给页面，没有缓存则进入网络请求阶段
- DNS解析
- 通过三次握手建立TCP连接
- 合成请求头信息，发送http请求
- 处理响应信息
- 通过四次挥手断开TCP连接
- 如果响应状态码301，则重定向
- 浏览器进行页面渲染：1）解析html，生成DOM树；2）根据css计算节点样式，生成stylesheet；3）生成布局树；4）为特定的元素生成独立图层；5）…
4****、说一下浏览器如何渲染页面的？
1.解析HTML，生成DOM树
2.解析CSS，生成CSSOM树
3.两棵树结合，生成Render树
4.计算布局，绘制页面的所有节点
5.绘制布局
5****、说一下重绘、重排区别如何避免？
重绘不一定引起重排、但重排一定会引起重绘。
如何避免：
1.减少直接操作DOM元素，可以使用ClassName
2.避免使用Table，改变该属性会导致页面的重排
3.多个DOM元素改变时，使用DocumentFragment一次性重排
4.position属性设置为fixed或者absolute，脱离文档流
6****、说一下浏览器垃圾回收机制？
浏览器的垃圾回收机制就是我们程序在工作的过程中或者执行之后，会产生一些用不到的内存变量，这些变量会一直占据这内存，所以这时候需要垃圾回收机制帮我清理这些用不到的变量，从而释放内存空间。
垃圾回收机制最常见的有两种：1.标记清除算法。2：引用计数算法。
标记清除算法就是执行前将所有的变量打上标记，执行完成后未被打上标记的变量就会当做垃圾回收。浏览器会隔一段时间进行一次标记清除
引用计数算法：就是对对象的引用次数进行增加或者减少，如果引用次数变为0，那么该对象分配的内存空间立即就会被清除掉。
7、说一说事件循环Event loop****，宏任务与微任务？
eventloop，首先执行同步任务，并把同步任务里的异步任务放入队列中，当执行完同步任务后会执行队列中的异步任务，异步任务分为宏任务和微任务，首先执行宏任务，把宏任务里的微任务放入队列中，然后执行微任务
宏任务包含：执行script标签内部代码、setTimeout/setInterval、ajax请、postMessageMessageChannel、setImmediate，I/O（Node.js）
微任务包含：Promise、MutonObserver、Object.observe、process.nextTick（Node.js）
8****、说一说跨域是什么？如何解决跨域问题？
1.概念：浏览器同源策略（协议，域名，端口三者是否一致）导致的跨域问题，是浏览器的一种安全限制；
2.解决方案：1）jsonp
2）后端cors
3）Nginx反向代理（将前端和web端代理到同一个ip端口下，就可以跳过同源策略）
4）vue项目的devServer设置proxy（同源策略是浏览器限制的，如果通过服务端发服务端就不会有这个限制，devServer就是通过创建一个node服务器发送请求）
9、说一说vue****钩子函数？
1、概念：Vue实例创建和销毁过程中自动执行的函数；
2、常见的生命周期中的钩子函数：
创建阶段：beforeCreate，create，beforeMount，mount；
更新阶段：beforeUpdate，update，activeted；
销毁阶段：beforeDestroy，destroy。
3、完整的父子组件生命周期执行顺序：
- 加载渲染过程：父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted - 子组件更新过程：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated
- 父组件更新过程：父beforeUpdate —> 父updated
- 销毁过程：父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed
10****、说一说组件通信的方式？
1、父子组件通信常用props和$emit还有$refs；
2、兄弟组件通信常用定义的公共事件bus的$on、$emit；
3、祖先和子孙组件通信常用$attrs和$listener、provide和inject；
4、复杂通信常用vuex
11、说一说computed和watch****的区别？
computed是计算属性，依赖其他属性值，并且有缓存，只有当依赖的值发生了变化之后才会重新计算，不支持异步操作，而watch更多的是监听，当监听的值发生了变化，会立即执行回调进行操作，支持异步
12****、说一说 v-if 和 v-show****区别？
v-if和v-show都是用来控制DOM元素是否显示在页面上，v-if是通过从DOM树上插入和删除实现控制DOM元素的显示，而v-show通过设置元素的css属性display控制DOM元素的显示
13****、说一说 vue 的 keep-alive ？
1、keep-alive是vue的内置组件，能在组件切换过程中将状态保留在内存中，相当于缓存，防止DOM的重复渲染；
2、keep-alive有三个属性：include（只有名字匹配的才会被缓存）、exclude（任何名字匹配的都不会被缓存）、max（最多可以缓存多少个组件）。
3、在路由router的中：相应组件下规定meta属性，定义keep-alive：true；
4、可以结合Vue组件实例加载顺序讲解，VNode->实例化->_updata->真实Node，在实例化的时候会判断该组件是否被keep-alive保存过，是的话则直接拿其中的DOM进行渲染。
14****、说一说 Vue 中 $nextTick 作用与原理？
Vue更新dom节点是异步操作，即数据更新之后，视图不会马上更新，所以修改数据后，在方法中获取到的dom节点不是更新后的dom节点，只有在nextTick里面才能获取到更新后的dom节点
15****、说一说 Vue 列表为什么加 key****？
Vue列表加key的目的是为diff算法添加标识，因为diff算法判断新旧VDOM是否相同的依据是节点的tag和key。如果tag和key相同则会进一步进行比较，使得尽可能多的节点进行复用。此外，key绑定的值一般是一个唯一的值，比如id。如果绑定数组的索引index，则起不到优化diff算法的作用，因为一旦数组内元素进行增删，后续节点的绑定的key也会发生变化，导致diff进行多余的更新操作。
16、说一说vue-router 实现懒加载的方法？
1、import形式：component:() => import(“./home.vue”);
2、异步组件形式：component:resolve => (require([‘./home.vue’], resolve));
2种方式实现懒加载作用主要是按需加载，不用到该路由，不加载组件，实现性能优化。
17****、说一说 HashRouter 和 HistoryRouter****的区别和原理？
- history和hash都是利用浏览器的两种特性实现前端路由，history是利用浏览历史记录栈的API实现，hash是监听location对象hash值变化事件来实现
- history的url没有’#’号，hash反之
- 相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要。
HashRouter的原理：通过window.onhashchange方法获取新URL中hash值，再做进一步处理
HistoryRouter的原理：通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理
18、说一说Vuex****是什么，每个属性是干嘛的，如何使用 ？
- 概念：Vuex是全局状态管理仓库，相当于window对象挂载了一个全局变量。 2. 属性：state（数据源）、actions（处理异步事件）、mutations（处理同步事件）、getters(过滤数据)和modules（模块）
19、说一说Vue2.0 双向绑定的原理与缺陷？
- Vue响应式指的是：组件的data发生变化，立刻触发视图的更新
- 实现原理： Vue 采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter，getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理。
20、说一说Vue3.0 实现数据双向绑定的方法 ？
Vue3.0 是通过Proxy实现的数据双向绑定，Proxy是ES6中新增的一个特性，实现的过程是在目标对象之前设置了一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
21、React****生命周期的各个阶段是什么？
22、ReactRouter****基本用法是什么？
23、React****组件间传值的方法有哪些？
24、setState****是同步还是异步的？
25、React****事件绑定原理
26、React中hooks****的优缺点是什么？
27****、说一说前端性能优化手段？
前端资源比较庞大，包括HTML、CSS、JavaScript、Image、Flash、Media、Font、Doc等等，前端优化相对比较复杂，对于各种资源的优化都有不同的方式，按粒度大致可以分为两类：
一类是文件加载更快
- 让传输的数据包更小（压缩文件/图片）：图片压缩和文件压缩
- 减少网络请求的次数：雪碧图/精灵图、节流防抖
- 减少渲染的次数：缓存（HTTP缓存、本地缓存、Vue的keep-alive缓存等）
另一类是文件渲染更快
- 提前渲染：ssr服务器端渲染
- 避免渲染阻塞：CSS放在HTML的head中 JS放在HTML的body底部
- 避免无用渲染：懒加载
- 减少渲染次数：对dom查询进行缓存、将dom操作合并、使用减少重排的标签
在用户角度前端优化可以让页面加载得更快，对用户的操作响应得更及时，能够给用户提供更为友好的体验，在服务商角度前端优化能够减少页面请求数，减小请求所占带宽，能够节省服务器资源。
28****、说一说性能优化有哪些性能指标，如何量化？
1.性能评估 Chrome Performance选项卡 / Lighthouse 生成性能检测报告
2.值得关注的性能指标
（1）LCP (Largest Contentful Paint 最大内容绘制 )
（2）首屏渲染时间（也叫白屏时间）
（3）FCP (Fitst Contentful Paint 首先内容绘制 )
（4）可交互时间 (Time to Interactive TTI)
（5） Network请求时间(jax,js等)
3.浏览器开发者工具什么都能看得到，可以调用性能监测API 或建立 前端监控系统(无痕埋点)
29****、说一说服务端渲染？
SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。和它对应的是，CSR是Client Side Render简称；
客户端在请求时，服务端不做任何处理，直接将前端资源打包后生成的html返回给客户端，此时的html中无任何网页内容，需要客户端去加载执行js代码才能渲染生成页面内容，同时完成事件绑定，然后客户端再去通过ajax请求后端api获取数据更新视图。
服务端渲染的优势：减少网络传输，响应快，用户体验好，首屏渲染快，对搜索引擎友好，搜索引擎爬虫可以看到完整的程序源码，有利于SEO
30、XSS****攻击是什么？
XSS指跨站脚本攻击，是攻击者通过向被攻击网站注入恶意代码实现攻击，当被攻击者登录这些网站是就会执行恶意代码，读取cookie、session cookie以及其他敏感信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等
31、CSRF****攻击是什么？
1.概念：跨域请求伪造。
2.原理：诱导用户跳转到新的页面，利用 服务器的验证漏洞 和 用户之前的登入状态，来模拟用户进行操作。
3.防范：利用cookie的sameSite属性规定其他网站不能使用本网站的cookie。或者使用token验证，再去验证用户身份。
32、说一下Diff****算法？
1、Diff算法主要就是在虚拟DOM树发生变化后，生成DOM树更新补丁的方式，对比新旧两株虚拟DOM树的变更差异，将更新补丁作用于真实DOM，以最小成本完成视图更新；
2、框架会将所有的结点先转化为虚拟节点Vnode，在发生更改后将VNode和原本页面的OldNode进行对比，然后以VNode为基准，在oldNode上进行准确的修改。（修改准则：原本没有新版有，则增加；原本有新版没有，则删除；都有则进行比较，都为文本结点则替换值；都为静态资源不处理；都为正常结点则替换