2021前端面试题Vue

1、框架类

Vue2框架核心，响应式原理

Vue3做了哪些优化改动，watch与watchEffect的区别，依赖注入，响应式相互转换

介绍完整的生命周期，render会在哪几个周期执行

自定义指令

插件开发

vue.use()背后的逻辑

data为什么建议function方式

计算属性与watch的区别

v-show 与 v-if 的区别

$alots的用法，如果获取组件下面的所有子组件

组件间的通信方式

Vuex的几大属性，为什么mutation只能同步执行而action能异步执行，vuex的核心思想。

介绍下虚拟dom

与react的比较

react中hooks使用过哪些，useCallback有什么作用

• useState
• useCallback：对某些依赖属性的变化才会重新创建返回回调函数
• useEffect：第二个参数3种情况的区别（不传，空数组，指定属性的数组）
• useEffect与之前的生命周期是否可映射

react中memo、useMemo、pureComponent有什么区别

• pureCoponent：对组件本身的props进行浅层次的对比，简单实现shouldComponentUpdate函数。缺点：1、不能深层次的比较，2、子组件更新将被忽略
• memo：对纯函数组件进行缓存
• useMemo：对某些依赖属性的变化才会重新计算结果

2、浏览器类

浏览器组成

• 渲染引擎
• 网络模块
• 储存模块
• 用户界面
• 浏览器引擎
• xml解析器
• css解析器
• js解释器

回流与重绘

• 回流：几何属性的变化会引起回流，回流必然重绘。
• 重绘：非几何属性的变化会引起重绘。

V8引擎

• 利用了算法、缓存，提高了js的效率。

3、协议类

http1.1、http2、https的区别

socket协议

http协议（过程），例如在地址栏输入url后所发生的一系列动作：

• 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
• 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
• 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
• 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
• 释放 TCP连接(如果connection是keep-live，会短时间继续保持TCP连接，可以继续接收请求);
• 浏览器将该 html 文本并显示内容; 　

一个http请求，包含的请求信息有：请求行、请求头、空行和请求数据

一个http响应，包含的响应信息有：状态行、消息头、空行和响应数据

详细解读：https://www.cnblogs.com/an-wen/p/11180076.html

4、css类

盒模型

• 标准盒模型：margin + border + padding + content ,   width = content
• 怪异盒模型（ie浏览器）：margin + border + padding + content ，width = border + padding + content

内行元素与块元素的区别

• 行内元素：margin只有左右有效，padding均有效，高度 可 行高设置。可多个在一行。
• 块  元  素：margin均有效，padding均有效，高度 可 行高或高度设置。单独占行。

行高对元素高度的影响

• 未设置高度下，行高可直接影响高度，如line-height: 0; 那么高度就为0

选择器有哪些，优先级怎样的

• id选择器、类选择器、标签选择器、属性选择器、子选择器、后代选择器、伪类选择器、伪元素选择器、组合选择器、群选择器
• 内联样式  >  id选择器  >  类选择器、伪类选择器、属性选择器  >  标签选择器、伪元素选择器

何为伪类选择器、伪元素选择器？伪元素选择器冒号1个和2个的区别

• 伪类选择器：:first-child 、:last-child、 a:link、 a:hover等
• 伪元素选择器： ::before、 ::after等
• 伪元素选择器几个冒号取决于css版本，在css2中是1个冒号，css3中是2个冒号。

实现垂直居中布局的方式

• text-align + line-height实现文本居中对齐
• 子元素position + margin
• 子元素position + transform
• 父元素padding
• flex布局
• table布局

实现竖直排列的水平垂直居中布局的方式

• flex布局（定义主轴 + 主轴对齐方式 + 负轴对其方式）

5、js类

原型、原型链

• 原型：供所有实例共享的属性和方法的模型对象
• 原型连：在访问对象某一属性时，由本身沿着__proto__逐级往上访问prototype对象所形成的一条链，最终访问到null为止。

js数据类型、类型检测方法

• 基本数据类型：String、Number、Boolean、Null、UNdefined、Symbol
• 引用数据类型：Object、Array、Function
• 检测方法：Object.prototype.toString.call( target )    // 返回: [object type]

关于内存泄露的原因以及注意的地方

• dom事件未被及时移除
• 闭包
• 未被其他任何地方引用的两个相互引用的对象在chrome中会被垃圾回收，但在IE中不被回收
• 在闭包中、作用域中应及时的删除无用的引用。

如何实现一个深拷贝函数

function deepClone(obj){
    let cloneObj = Array.isArray(obj) ? []:{};
    if(obj && typeof obj ==="object"){
        for(var key in obj){
            if(obj.hasOwnProperty(key)){
                if(obj[key] && typeof obj[key] === "object"){
                    cloneObj[key] = deepClone(obj[key]);
                } else{
                    cloneObj[key] = obj[key]
                }
            }
        }
    }
    return cloneObj;
}

如何复制一个数组

• slice方法（浅复制），如 [ 1,2,3,4 ].slice()  
• concat方法， 如 [ ].concat( target )
• 遍历数组
• Object.assign方法，如 Object.assign( [ ],  target )
• 扩展运算符， 如 [ ...target ]
• JSON api

在node中运用过哪些技术

算法、数据结构、设计模式

谈谈this

setTimeout与setInterval的区别

• 除都能创建异步任务外，setInterval能不断反复执行，并且在eventloop的消息队列中如果存在同一个setInterval创建的任务时， 不再创建任务进入eventloop的消息队列中。

new运算符所发生的事情

• 创建一个空的新对象
• 链接该对象（设置该对象的constructor）到另一个对象（即新对象的__proto__属性指向构造函数的prototype）
• 将步骤1新创建的对象作为this的上下文 
• 如果构造函数没有返回值，返回this；如果有返回值，则返回该返回值。

js执行顺序、事件循环（event loop）、以及和渲染的关系

• mdn: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

组件化和模块化的区别

• 组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。
• 模块相应于业务逻辑模块，把同一类型项目里的功能逻辑进行进行需求性的封装。

垃圾回收机制

• 引用计数垃圾收集（被引用次数为0，则被回收，缺点：IE中两个相互引用的对象不能被回收）
• 标记-清除回收（简单的说，从根开始检查，对象不可被获得的时候，被回收）
• https://www.cnblogs.com/pssp/p/5211637.html
• mdn: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management

js dom选择器是如何寻找指定节点的

• 根结点开始，从左到右，从上到下，进行深度遍历。

6、webpack

单页面与多页面配置

babel的作用

• 把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言（比如ES6-ES11）。

loader与plugin的区别、有没有自己写过loader或者plugin。

• loader：仅仅为了打包需要的加载文件、转换文件（转换为js）的函数
• plugin：解决loader处理不了的问题，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

webpack是如何打包的

webpack的几种hash的区别

• hash，项目级别，项目中任何地方有改动，hash值改变。
• chunkhash，是根据不同的入口进行依赖文件解析，构建对应的chunk(模块)，生成对应的hash值。
• contenthash，根据该生成文件的内容计算得出的值。

何为AMD、CMD、commonJS

• AMD：推崇依赖前置，提前执行。
• CMD：推崇依赖就近，延迟执行。
• 详细见：https://blog.csdn.net/weixin_34175509/article/details/92857869?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.baidujs&dist_request_id=1328603.57877.16151848307475629&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.baidujs

7、优化类

目前在项目中你所用到的优化方案有哪些?

• 减少http请求。比如图片、css、js的文件请求进行合并。每个http请求都会建立通信链路、进行数据传输，而在服务端，每个Http都需要开启一个线程去处理，开销很昂贵。
• 使用浏览器缓存。资源的缓存，资源若虚更新请批量更新。
• 启用压缩。
• css放在页面顶部js放在页面底部。防止页面的阻塞。
• 减少cookie的传输。比如静态资源请求可放在其他域名，减少无效的cookie传输。
• CDN加速。
• 反向代理。服务端缓存，后续用户能访问到第一位用户的资源缓存。
• 使用http2
• 请求想缓存用get请求
• html5开启离线缓存
• css、js代码模块化
• 高性能js代码（特别注意循环、闭包、条件判断语句的选择等）

8、新名词

微前端