我的面试经（一）*

1.说说你对http的理解

http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。 https:是以安全为目标的 HTTP 通道，即 HTTP 下加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

http 和 https 的区别及优缺点？

http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中被窃取、改变，确保数据的完整性(当然这种安全性并非绝对的，对于更深入的 Web 安全问题，此处暂且不表)。
http 协议的默认端口为 80，https 的默认端口为 443。
http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
https 缓存不如 http 高效，会增加数据开销。
Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。
SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗。这里juejin.cn/post/701659…

2.说说你对浏览器的渲染机制的理解

渲染过程

处理 HTML 标记并构建 DOM 树。
处理 CSS 标记并构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树。
根据渲染树来布局，计算每个节点的几何信息。
将各个节点绘制到屏幕上。这仅仅是初级理解，更多的，要参考juejin.cn/post/684490…

3.var，let，const的区别

1）块级作用域： 块作用域由 { }包括，let 和 const 具有块级作用域，var 不存在块级作用域。块级作用域解决了 ES5 中的两个问题：

内层变量可能覆盖外层变量
用来计数的循环变量泄露为全局变量

（2）变量提升： var 存在变量提升，let 和 const 不存在变量提升，即在变量只能在声明之后使用，否在会报错。

（3）给全局添加属性： 浏览器的全局对象是 window，Node 的全局对象是 global。var 声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是 let 和 const 不会。

（4）重复声明： var 声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const 和 let 不允许重复声明变量。

（5）暂时性死区： 在使用 let、const 命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用 var 声明的变量不存在暂时性死区。

（6）初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而 const 声明变量必须设置初始值。

（7）指针指向： let 和 const 都是 ES6 新增的用于创建变量的语法。 let 创建的变量是可以更改指针指向（可以重新赋值）。但 const 声明的变量是不允许改变指针的指向。

![I(3C3Q4D_VPFP355JIG57R.png 参考

4.## `vue` 组件间传值的 `n` 种方式

props/$emit 父子组件通信

父->子props，子->父 $on、$emit 获取父子组件实例 parent、children Ref 获取实例的方式调用组件的属性或者方法父->子孙 Provide、inject 官方不推荐使用，但是写组件库时很常用
$emit/$on 自定义事件兄弟组件通信

Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue() 自定义事件
vuex 跨级组件通信

Vuex、$attrs、$listeners Provide、inject

5.vue路由传参的方法

方法一：params传参：

this.$router.push({
        name:"admin",　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)
        params:{id:item.id}
})       
//这个组件对应的路由配置
{　　//组件路径
    path: '/admin',　　//组件别名
    name: 'admin',　　//组件名
    component: Admin,
}
        复制代码

　　通过params传递参数，如果我们想获取id的参数值，我们可以通过this. $route.params.id这种方式来打印出来就可以得到了；（注意：获取参数的时候是$ route，跳转和传参的时候是$router）

方法二：路由属性配置传参：

this.$router.push({
        name:"/admin/${item.id}",
})       

//这个组件对应的路由配置
{
　　//组件路径
    path: '/admin:id',
　　//组件别名
    name: 'admin',
　　//组件名
    component: Admin,
}复制代码

　　通过路由属性配置传参我们可以用this. $route.params.id来获取到id的值，注意this.$ router.push方法里面路径带的是值，路由配置项那里带的是变量名(属性名)来实现的对应；

　　以上两种传参方式基本上可以理解为ajax中的post请求方式，参数都是不可见的，但是上面两种方法都有一个弊端，就是当页面刷新了是获取不到参数值的，那么有没有一种方法是页面刷新之后参数依然存在呢？

方法三：query传参

this.$router.push({
        name:"/admin",　　　　 query:{id：item.id}
})       

//这个组件对应的路由配置
{
　　//组件路径
    path: '/admin',
　　//组件别名
    name: 'admin',
　　//组件名
    component: Admin,
}复制代码

　　第三种方式是用query来传参，这种方式是可以解决页面刷新参数消失问题的，这种方式可以理解为是ajax中的get方法，参数是直接在url后面添加的，参数是可见的，所以解决页面刷新参数消失问题建议使用方法三来解决；来源

6.说说get，post的理解

相同点：GET 和 POST 方法只是 HTTP 协议为了不同分工而规定的两种请求方式。HTTP 的底层是 TCP/IP。所以 GET 和 POST 的底层也是 TCP/IP，也就是说，GET 和 POST 都是 TCP 链接。所以说，它们的本质是相同的。

GET 和 POST 之所以产生，要通过HTTP的规则和浏览器/服务器的限制进行区分，使它们在应用过程中体现出不同。

整个请求过程大概是这样的：

客户端 IP 发出请求。
发出的请求数据包会通过 TCP ，经网络传输给远程服务端 IP。
服务端 IP 收到请求包之后，解析并处理请求包最后服务端会通过 TCP 将处理结果返回给客户端。
用户便可以查看到想要的响应数据。

区别：GET产生一个TCP数据包;POST产生两个TCP数据包。

在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。

春招：前端面试的总结