2022-05月面试总结

数据类型有哪几种？

基本数据类型：String、Number、Boolean、Undefined、Null、Symbol（符号）

引用数据类型：Array、Object、Function、Data（时间）

基本数据类型和引用类型的区别？

基本数据类型保存在栈中，保存与复制的是值本身

引用数据类型保存在堆中，保存与复制的是指向对象的指针

h5新增的标签有哪些？

header footer aside nav section menu video audio canvas mark code

 css选择器有哪些？

id选择器、class选择器、标签选择器、后代选择器、兄弟选择器，相邻兄弟选择器、属性选择器、后代选择器、通配符选择器

 css选择器的优先级？

!import > 行内 > id > class > 标签 > 通配符选择器

 css的单位？

px、em、rem、%、vw、vh、vm(宽和高中取偏小的一个)

 em和rem的区别？

em是相对父元素或者更上一级的fontsize的一个单位

rem是相对根元素的fontsize的单位

 假设一个UI尺寸图是750的，rem应该设置为多少？

一般font-size:100px

 关于对this的理解？

1. 全局函数中this指向windows
2. 函数在对象中则this指向该对象
3. 在构造函数中，this指向new出来的对象
4. 当事件函数绑定在dom元素上，this指向绑定的dom元素
5. 在箭头函数中没有this, this的指向和父级作用域中的this是一样的

ES6的新语法？

let、const、箭头函数、模板字符串、解构对象、默认参数、rest参数、class、extend

 axios和ajax的区别？

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

 ajax和axios的优缺点

ajax：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
axios：
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

 vue的生命周期？

BeforeCreate、Created、BeforeMount、Mounted、BeforeUpdate、Updated、BeforeDestory、Destoryed

 在BeforeDestory中发送的请求有返回值吗？

有

 父组件中有子组件时的生命周期是什么样的？

1.加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
2.子组件更新过程父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
3.父组件更新过程父 beforeUpdate -> 父 updated
4.销毁过程父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

 vue组件传参的方式？

父传子：props

子传父：$emit、v-on

provide / inject

vuex

ref / $parent / $children

 vuex的api有哪些？

state、getter、mutation、action、moudel

 action和mutation有什么不一样？

mutation是同步的，action是异步的

 mutation中可以使用axios请求数据吗？

不能，因为mutation是同步的，axios是异步的

 vue的指令有哪些？

v-if、v-show、v-for、v-bind（:）、v-on（@）、v-model、v-slot

 v-if和v-show的区别？

v-if是通过判断来插入或者销毁一个元素

v-show是元素已经在页面中，通过css来控制显隐

 key的作用？

v-for循环时给元素添加key可以在数据更新时使vue可以尽可能的实现复用，减少动态元素

key 的作用主要是为了高效的更新虚拟DOM

 箭头函数是否可以直接写在v-on中？

可以

 v-on可不可以绑定多个事件？

可以

nginx有什么用？

1、作为web服务器

2、实现负载均衡

3、反向代理服务器

Vue项目性能优化？

路由懒加载

按需引入组件

图片资源压缩

不要写行内样式，避免dom重绘

v-if和v-show区分使用场景

key保证唯一性

代码精简，去除 console ，可复用的方法、组件提取出来

对于短时间的大量操作（缩放、滚动）使用防抖、节流函数

SPA 页面采用keep-alive缓存组件

v-cloak 防止闪烁

长列表分页加载数据

路由模式hash与history的区别

hash: 带#号，使用 URL hash 值来作路由。支持所有浏览器
history : 不带#，依赖 HTML5 History API 和服务器配置。
（abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.）

vue2和vue3的区别

Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达13种拦截方法。 

vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象

Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的

new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

 怎么定义vue-router的动态路由？怎么获取传过来的值？

params：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

路由配置：

path:'/user/:id'

页面：

this.$router.push({name:'users',params:{id:123}})

query：不需要配置路由格式，使用 router 对象的 query.id 获取

this.$router.push({ name: 'users', query:{ id:123}})

params类似于post，query更加类似于我们ajax中get传参，

 web安全

 SQL注入攻击的核心在于让Web服务器执行攻击者期望的SQL语句，以便得到数据库中的感兴趣的数据或对数据库进行读取、修改、删除、插入等操作，达到其邪恶的目的。

通常放在form表单中，解决方案：在提交表单的时候做数据校验

XSS全称跨站脚本攻击（Cross Site Scripting），为了与重叠样式表CSS区分，换了另一个缩写XSS

XSS攻击的核心是将可执行的前端脚本代码（一般为JavaScript）植入到网页中，听起来比较拗口，用大白话说就是攻击者想让你的浏览器执行他写的JS代码。那如何办到呢？一般XSS分为两种：

反射型

• 1、攻击者将JS代码作为请求参数放置URL中，诱导用户点击

示例：

http://localhost:8080/test?name=<script>alert("you are under attack!")</script>

• 2、用户点击后，该JS作为请求参数传给Web服务器后端

• 3、后端服务器没有检查过滤，简单处理后放入网页正文中返回给浏览器

• 4、浏览器解析返回的网页，中招！

存储型

CSRF，跨站请求伪造，其核心思想在于，在打开A网站的情况下，另开Tab页面打开恶意网站B，此时在B页面的“唆使”下，浏览器发起一个对网站A的HTTP请求。这个过程的危害在于2点：

• 1、这个HTTP请求不是用户主动意图，而是B“唆使的”，如果是一个危害较大的请求操作（发邮件？删数据？等等）那就麻烦了

• 2、因为之前A网站已经打开了，浏览器存有A下发的Cookie或其他用于身份认证的信息，这一次被“唆使”的请求，将会自动带上这些信息，A网站后端分不清楚这是否是用户真实的意愿

上述方式攻击脚本直接经服务器转手后返回浏览器触发执行，存储型与之的区别在于能够将攻击脚本入库存储，在后面进行查询时，再将攻击脚本渲染进网页，返回给浏览器触发执行。常见的套路举例如下：

• 1、攻击者网页回帖，帖子中包含JS脚本

• 2、回帖提交服务器后，存储至数据库

• 3、其他网友查看帖子，后台查询该帖子的回帖内容，构建完整网页，返回浏览器

• 4、该网友浏览器渲染返回的网页，中招！

DNS劫持

DNS提供服务用来将域名转换成IP地址

DNS劫持方法

• 本地计算机中的木马修改hosts文件

• 本地计算机中的木马修改DNS数据包中的应答

• 网络中的节点（如路由器）修改DNS数据包中的应答

• 网络中的节点（如运营商）修改DNS数据包中的应答

后来，为了在客户端对收到对DNS应答进行校验，出现了DNSSEC技术，一定程度上可以解决上面的部分问题。但限于一些方面的原因，这项技术并没有大规模用起来，尤其在国内，鲜有部署应用。

DDoS全称Distributed Denial of Service：分布式拒绝服务攻击(在这个文章里也有介绍：)。是拒绝服务攻击的升级版。拒绝攻击服务顾名思义，让服务不可用。常用于攻击对外提供服务的服务器

JSON劫持

JSON是一种轻量级的数据交换格式，而劫持就是对数据进行窃取（或者应该称为打劫、拦截比较合适。恶意攻击者通过某些特定的手段，将本应该返回给用户的JSON数据进行拦截，转而将数据发送回给恶意攻击者，这就是JSON劫持的大概含义。一般来说进行劫持的JSON数据都是包含敏感信息或者有价值的数据。