前端面试题

说说你对盒子模型的理解

在CSS中，盒子模型可以分成：

W3C 标准盒子模型

IE 怪异盒子模型

标准盒子模型：

盒子总宽度 = width + padding + border + margin;

盒子总高度 = height + padding + border + margin

就是，width/height 只是内容高度，不包含 padding 和 border值

IE 怪异盒子模型

盒子总宽度 = width + margin;

盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值

css选择器有哪些？优先级？哪些属性可以继承？

一、选择器

1. id选择器（#box），选择id为box的元素

1. 类选择器（.one），选择类名为one的所有元素

1. 标签选择器（div），选择标签为div的所有元素

1. 后代选择器（#box div），选择id为box元素内部所有的div元素

1. 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素

1. 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素

1. 群组选择器（div,p），选择div、p的所有元素

1. 伪类选择器

:link ：选择未被访问的链接              

:visited：选取已被访问的链接            

:active：选择活动链接                   

:hover ：鼠标指针浮动在上面的元素        

:focus ：选择具有焦点的                 

:first-child：父元素的首个子元素

1. 属性选择器

[attribute] 选择带有attribute属性的元素

[attribute=value] 选择所有使用attribute=value的元素

[attribute~=value] 选择attribute属性包含value的元素

[attribute|=value]：选择attribute属性以value开头的元素

1. 伪元素选择器

:first-letter ：用于选取指定选择器的首字母

:first-line ：选取指定选择器的首行

:before : 选择器在被选元素的内容前面插入内容

:after : 选择器在被选元素的内容后面插入内容

二、优先级

!important >内联 > ID选择器 > 类选择器 > 标签选择器

三、继承属性

在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

说说你对vue的理解

一、vue是什么

是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。是一套构建用户界面的 渐进式框架。

• Vue核心特性

数据驱动（MVVM)

MVVM表示的是 Model-View-ViewModel

• Model：模型层，负责处理业务逻辑以及和服务器端进行交互
• View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
• ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

为什么路由守卫的二次封装

当开发中路由越来越多的情况下;我们如果每个name和path都需要自己手动去写的话就会浪费不少时间;如果封装一个自动生成的name和path的方法;并且对components中共有的内容也进行提取这样会方便很多

跨域

什么是跨域：协议，域名，端口号不同请求，称之为跨域

一般配置代理：

在vue.config.js配置如下代码

  devServer: {

    proxy: {

      "/myApi": {

        //   请求要跨域到的地址

        target: "http://47.93.101.203",

        //   是否支持websocket

        ws: true,

        // 是否允许跨域

        changeOrigin: true,

        // 重写

        pathRewrite: { "/myApi": "" },

      },

    },

  },

};

.vuex持久化如何实现

安装vuex-persistedstate组件

如何防止xss 和csrf攻击

XSS 攻击：即跨站脚本攻击，它是 Web 程序中常见的漏洞。原理是攻击者往 Web 页面里插入恶意的脚本代码，当用户浏览该页面时，嵌入其中的脚本代码会被执行，从而达到恶意攻击用户的目的，如盗取用户 cookie、破坏页面结构、重定向到其他网站等。

预防xss：

预防 XSS 的核心是必须对输入的数据做过滤处理。对用户的输入进行过滤，如对标签等进行转义。

CSRF：跨站请求伪造,可以理解为攻击者盗用了你的身份，以你的名义发送恶意请求，比如：以你名义发送邮件、发消息、购买商品，虚拟货币转账等。

预防CSRF：

验证请求来源地址；

关键操作添加验证码；

在请求地址添加 token 并验证

Keepalive用法及优势

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

2、作用

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

3、原理

在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

防抖节流

防抖：n秒内触发多次，只会执行一次，如果在n秒内再次被触发，则重新计算时间

节流：指连续触发事件但是在 n 秒中只执行一次函数

防抖和节流的原理都使用到了闭包的概念：闭包的好处是里面的变量只会在闭包中使用，也就是外部的函数是不能使用这个变量的，也就不会修改这个变量，就不会受到外部的污染；

为什么axios的二次封装

主要是要用到请求拦截器和响应拦截器;

请求拦截器：可以在发请求之前可以处理一些业务

响应拦截器：当服务器数据返回以后，可以处理一些事情

1.安装axios

2.创建一个api文件夹

3.在api文件夹下创建request.js(用于书写axios二次封装的代码