腾讯面试复盘

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

面试内容主要考察基础是否扎实以及实际解决问题

对于技术的钻研如果仅限于知道，等到使用时再去查文档，以及需要对代码进行优化时，没有更好的解决方案，依赖搜索去寻求答案，那对于开发来说就很难成为一个合格的开发人员。一味的追求知识的广度和宽度，缺乏对基本概念以及原理的深入理解，那么是很难过关的，而这些是需要日常去积累，仅仅靠着面试前的几天进行知识点的广撒网是不足以应对面试者对综合能力的考察的。
面试时间持续了有一个多小时，面试后我进行复盘，进行了一个总结。

一、自我介绍

这里就不多赘述了，如果项目有亮点就要在这个时候点出来，对于做技术的来说，亮点可以由当前项目的复杂度，以及面临的挑战，后来如何解决，以及具体的实施策略有哪些来进行论述。当然这个环节可以简单带过，我们接着往下走。

二、对你来说项目中遇到的难点有哪些？

1.具体化场景

在面试时，我脑海中呈现的是之前的项目有一个树形组件，这个组件的内部实现原理相对复杂，除了树形数据的渲染以外，还包含了组件是单选还是多选，被选中后组件的状态的变化，以及单选多选的状态区分。

2.解决方案

将场景描述出来，并且提出解决方案，这里考查的就是你在实际开发中的思考问题的方式，以及你对于复杂问题的解决能力。

三、ssr原理

服务端渲染（Server-Side Rendering, SSR ）是指将页面的渲染逻辑放在服务器端完成，服务器将页面渲染完成后再将渲染结果返回给浏览器。

原理如下：

1、浏览器发送请求给服务器，请求访问某个URL
2、服务器接收请求，获取页面数据
3、服务器将页面数据和模板文件进行渲染，生成HTML页面
4、服务器将渲染后的HTML页面返回给浏览器。
5、浏览器展示HTML页面，并下载相应的Javascript 和 CSS文件
6、浏览器执行Javascript，并根据Javascript中的逻辑生成页面交互效果
7、页面渲染完成

服务端渲染的优点：

1、无需等待Javascript加载和执行，可以快速将页面展示给用户，提高用户体验
2、利于SEO，提高搜索引擎的收录率，因为搜索引擎能够直接获取到完整的HTML页面内容
3、可以提高网站的可访问性，因为一些浏览器或用户可能禁用了Javascript

服务端渲染的缺点：

1、需要将页面徐冉冉逻辑放到服务器端执行，会增加服务器资源的占用
2、如果页面是动态更新的，需要却表服务器端和客户端的数据保持同步
3、与客户端渲染相比，开发效率会降低，因为需要考虑到服务器端的逻辑。

四、vueRouter的原理

一、核心原理

1.什么是前端路由？

在Web前端单页用用SPA（Single Page Application）中，路由描述的是URL与UI之间的映射关系，这种映射关系是单向的，即URL变化引起UI更新（无需刷新页面）

2.如何实现前端路由？

要实现前端路由，需要解决两个核心：
1）如何改变URL却不引起页面刷新？
2）如何检测URL变化了？
下面分别使用 hash和history两种实现方式回答

hash实现

hash是URL中hash(#)及后面的那部分，常用作锚点在页面内进行导航，改变URL中的hash部分不会引起页面刷新，通过hashchange时间监听URL的变化，变化URL的方式只有这几种：
1、通过浏览器前进后退改变URL
2、通过 <a>标签改变URL
3、通过window.location改变URL

history实现

history提供了pushState和replaceState两个方法，这两个方法改变URL的path部分不会引起页面刷新。
history提供类似hashchange时间的popstate时间，但popstate时间有些不同：
1、通过浏览器千金后退改变URL时会出发popstate时间
2、通过pushState/replaceState或 <a>标签改变URL不会出发popstate时间
3、好在我们可以拦截pushState/replaceState的调用和<a>标签的点击事件来检测URL变化
4、通过js调用history的back, go, forward方法可出发该事件
所以监听URL变化可以实现，只是没有hashchange那么方便。

vueRouter核心

vueRouter核心是，通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的时候，根据router对象匹配相应路由，获取组件，并将组件渲染到视图上。
1、url改变
2、触发时间监听
3、改变vue-router中的current变量
4、监视current变量的监视者
5、获取新的组件
6、render
具体实现过程参考：https://cloud.tencent.com/developer/article/1880448

五、vuex的原理

六、vue2和vue3的区别

1、双向数据绑定原理不同

vue2：利用ES5的一个APIObject.defineProperty()对数据进行劫持，结合发布订阅模式的方式来实现的
vue3：使用ES6的Prosy API对数据代理。相比vue2.x，有如下优势：

• defineProoerty只能监听某个属性，不能对去俺对象监听
• 可以省去for in，闭包等内容来提升效率（直接绑定整个对象即可）
• 可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2、是否支持碎片化

vue2： 不支持碎片
vue3： 支持碎片，就是可以拥有多个根节点

3、API类型不同

vue2：选项类型api，在代码里分割了不同的属性：data，computed，method等；
vue3：组合式api，使用方法来分割，相比于旧的，这样代码更加简洁和整洁；

4、定义数据变量和方法不同

vue2：将数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods: {}中。
vue3：需要使用一个新的setup()方法，此方法在组件初始化构造的时候出发，使用一下三个步骤来建立反响应性数据：

• 从vue引入reactive
• 使用reactive()方法来声明数据为响应性数据；
• 使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据

5、生命周期钩子函数不同

vue2中的生命周期：

• beforeCreate 组件创建之前
• created 组件创建之后
• beforeMount 组价挂载到页面之前执行
• mounted 组件挂载到页面之后执行
• beforeUpdate 组件更新之前
• updated 组件更新之后

vue3中的生命周期：

• setup 开始创建组件
• onBeforeMount 组件挂载到页面之前执行
• onMounted 组件挂载到页面之后执行
• onBeforeUpdate 组件更新之前
• onUpdated 组件更新之后
• onBeforeUnmount 组件从页面卸载之前执行
• onUnmounted组件从页面卸载之后执行

6、父子传参不同

vue2：父传子，用props，子传父用事件Emitting Events。在vue2中，会调用this.$emit然后传入事件名和对象
vue3：父传子，用props，子传父用时间Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，name我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽不同

vue2：vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3：vue3中必须使用v-slot的形式；vue3中v-for与v-if，只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3移除v-on.native修饰符；vue3中移除过滤器filter。

8、main.js文件不同

vue2：我们可以使用prototype(原型)的形式去进行操作，引入的是构造函数。

vue3：需要使用结构的形式进行操作，引入的是工厂函数，vue3中app组件中可以没有跟标签。

七、html5有哪些新特性？

常见的html5有以下十个新特性：
1、Canvas绘图；
2、表单元素；
3、语义化标签；
4、媒体元素；
5、地理定位；
6、拖放API；
7、Web Worker；
8、Web Storage；
9、Web Socket；
10、SVG绘图。Canvas元素用于在网页上绘制图形。

八、css3动效类的属性有哪些？

1.@keyframes
2.animation
3.transform
4.transition
详情参考：https://blog.csdn.net/qq_34902437/article/details/79148536

九、说一说BFC,聊一聊实际出现的场景

参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
BFC(区块格式化上下文)是Web页面的可视CSS渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
以下方式会创建块格式化上下文：

• 文档的根元素（<html>）
• 浮动元素（float值不为none的元素）
• 绝对定位元素（position值为absolute或fixed的元素）
• 行内块元素（display值为inline-block的元素）
• 表格单元格（display值为table-cell，HTML表格单元格默认值）
• 表格标题（display值为table-caption，HTML表格标题默认值）
• 匿名表格单元格元素display值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）
• overflow值不为visible或clip的块级元素
• display值为flow-root的元素。
• contain值为layout、content或paint的元素
• 弹性元素（display值为flex或inline-flex元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器
• 网格元素（display值为grid或inline-grid元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器
• 多列容器（column-count或column-width值不为auto，且含有column-count:1的元素）
• column-span值为all的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中；

例子：
1.浮动元素设置父元素overflow: auto
2.防止外边距重叠，两个相邻的<div>元素，垂直方向含有10px的外边距。由于外边距重叠作用，垂直方向上它们之间具有10像素的间距。而不是所期望的20像素。通常我们将第二个<div>包裹在另一个<div>之中，可以创建一个新的BFC，防止外边距重叠。

十、笔试题

1、下面函数中的return不够美观，请进行优化

function AB() {
	const successA = A();
	if(!successA) {
		return
	}
	const successB = B();
	if(!successB) {
		return
	}
}
//提示
function AB() {
	A();
	B();
}

2、说出下面程序最终的输出结果

var getName = function () {
	console.log(1)
}
function getName() {
	console.log(2)
}
getName()

3、在程序内部实现一个进程阻塞的函数，经过一段时间后程序继续执行。

get(1)
await sleep(1000)
get(2)

---

总结

面试官态度温和，而且有耐心，有些问题没有答出来，都会有耐心的引导我去思考，在面试过程中，自己有些缺乏自信，有思路但没有勇于表达，所以面试状态也非常重要，当然底层原因是对基础掌握的不够扎实，对原理把握的不够到位才不敢开口。基础知识就是王道，要想平时在工作中少出bug，也是需要扎实的基础。