2022-08-07-每日一题答案.md

1、前端基础

1.1 HTTP/HTML 浏览器.

说一下 http 和 https tcp三次握手，一句话概括 TCP和UDP 的区别。 Websocket 的实现和应用 HTTP 请求的方式，HEAD 方式 -个图片 url 访间后直接下载怎样实现？说一下 web Quality （无障碍）几个很实用的 BOM 属性对象方法？说一下 HTML5 drag api 说一下 htp2.0. 补充 400 和401、403 状态码 fetch 发送2次请求的原因。 Cookie、sessionStorage、localStorage 区别说一下 web worker

1.2 CSS.

说一下css 盒模型。

画一条 0.5px 的线。

link 标签和 import 标签的区别

transition 和 animation 的区别.

Flex布局

BFC（块级格式化上下文，用于清楚浮动，防止margin 重叠等）

垂直居中的方法．

关于 JS 动画和 css3 动画的差异性

说一下块元素和行元素.

多行元素的文本省路号.

visibility=hidden.、opacitv=0、 display:none

双边距重叠问题（外边距折叠）

1.3 JS

什么是事件监听介绍一下 promise、及其底层如何实现

说说C++,Java, JavaSeript 这三种语言的区别

JS 原型链，原型链的顶端是什么？0bject 的原型是什么？0bject 的原型的原型是什么？在数组原型链上实现删除数组重复数据的方法.

什么是js 的闭包？有什么作用。用闭包写个单例模式

promise generator async 的使用

事件委托以及冒泡原理。

写个函数，可以转化下划线命名到驼峰命名。

深浅拷贝和浅拷贝的区别和实现

JS中string 的 startwith 和 indexof 两种方法的区别。

JS字符串转数字的方法

let const var 的区别，什么是块级作用城，如何用 ES5 的方法实现块级作用城（立即执行两数），ES6 呢

ES6 箭头函数的特性

setTimeout 和 Promise 的执行顺序．

有了解过事件模型吗，DOM0 级和DOM2 级有什么区别，DOM的分级是什么。

平时是怎么调试 JS的。

JS基本数据类型和引用教抿类型的区别.

get 请求传参长度的误区

补充 get 和 post 请求在缓存方面的区别.

说一下闭包

说一下类的创建和继承．

如何解决异步回调地狱．

说说前端中的事件流。

如何让率件先冒泡后捕获，

说一下事件委托

说一下图片的懒加载和预加载。

mouseover 和mouseenter 的区别。

JS的 new 操作符做了哪些事情．

改变的数内部 this 指针的指向函数(bind. apply. call 的区别）

axios 是什么？怎样使用它？怎么解决跨城的问题？

JS的各种位置，比如 clientHeight,scrollHfeight,offsetHeight，以及 scroll offsetTop.clientTop 的区别？

JS拖拽功能的实现

Aiax 解决浏览器缓存向题.

JS的节流和防抖．

JS 中的垃圾回收机制

eval 是做什么的。

如何理解前端模块化

说说你对 proxy 的理解

对象深度克隆的简单实现

说一下 CommonIS. AMD 和CMD.

实现一个 once 函数，传人两数参数只执行一次

将原生的ajax 封裝成 promise

JS监听对象属性的改变.

如何实現一个私有变量，用getName 方法可以访问．不能直接访间…

React

在React 中，refs 的作用是什么？
何为高阶组件(higher order component)?

高阶组件是参数为组件，返回值为新组件的函数。
使用箭头函数(arrow functions)的优点是什么？

为什么建议传递给 setState 的参数是一个callback 而不是一个对象？

除了在构造函数中绑定 this，还有其它方式吗？

怎么阻止组件的渲染？。

当渲染一个列表时，何为 key？设置 key 的目的是什么？

何为 JSX？

React 组件的划分业务组件技术組件？

redux 有什么缺点

React 生命周期函數。

React 性能优化是哪个周期函数？

Vue 框架.

有使用过 Vue 吗？说说你对Vue 的理解.

说说 Vue 的优缺点

Vue 和 React 有什么不同？使用场最分别是什么？

什么是虚拟 DOM？

请描述下 vue 的生命周期是什么？

vue 如何监听键盘事件

@keyup.别名 @keyup.enter
@keyup.keycode

watch 怎么深度监听对象变化

删除数组用 delete 和 Vue.delete 有什么区别？ Vue.delete：直接删了数组成员，并改变了数组的键值（对象是响应式的，确保删除能触发更新视图，这个方法主要用于避开 Vue 不能检测到属性被删除的限制）

delete：只是被删除数组成员变为 empty / undefined，其他元素键值不变

watch 和计算属性有什么区别？

Vue 双向绑定原理，

v-model 是什么？有什么用呢？

在vue 项目中如何引人第三方库（比如 jQuery）？有哪些方法可以做到？

一、绝对路径直接引入，全局可用
主入口页面 index.html 中用 script 标签引入：由于开启了 ESLint 检测，所以会报一个 warning[警告] ：’$’ is not defined 。需要加 /* eslint-disable */
二、绝对路径直接引入，配置后，import 引入后再使用还是先在主入口页面 index.html 中用 script 标签引入：
```
<script src="./static/jquery-1.12.4.js"></script>
 // 然后，在 webpack 中配置一个 externals
externals: { 'jquery': 'jQuery' }
```
这样，就可以在每一个组件中用 import 来引用这个 jquery 了。

import $ from 'jquery'

export default {
    created() {
    console.log($)
   }
}

异步加载 JS的方法

import()
动态创建script标签插入

Vue3.0 里为什么要用 Proxy API 替代 defineProperty API?

Vue3.0 编译做了哪些优化？

源码体积优化移除一些冷门的 feature（比如 filter、inline-template 等）；
引入 tree-shaking 的技术，减少打包体积。
数据劫持优化 proxy代替defineProperty
diff算法优化静态提升事件监听缓存 SSR优化

Vue3.0 新特性-

Composition API
SFC,
Teleport
suspense
TypeScript
creatRender

Composition API 与 React.js 中 Hooks 的异同点.159

Vue Composition API：闭包变量、响应式的依赖追踪
React Hooks: 纯函数、无副作用

Vue3.0 是如何变得更快的？（底层，深码）

vue 要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

vue 在created 和mounted 这两个生命周期中请求数据有什么区别呢？

Vues3.0 编译做了哪些优化？

静态标记静态提升

watch 怎么深度监听对象变化 deep

vue3 的Block Tree 是什么，静态标记

block Tree

Block收集动态结点

那么在我们更新组件的时候，会优先判断新旧vnode中是否存在dynamicChildren属性。如果有的话，就只对这些dynamicChildren进行diff算法的比较。这样就可以省去大量的静态节点的比较，提高了vue的性能。

vue3.0 优化了slot 的生成。

vue3.0 优化

1. 源码优化：

使用monorepo来管理源码 Vue.js 2.x 的源码托管在 src 目录，然后依据功能拆分出了 compiler（模板编译的相关代码）、core（与平台无关的通用运行时代码）、platforms（平台专有代码）、server（服务端渲染的相关代码）、sfc（.vue 单文件解析相关代码）、shared（共享工具代码）等目录。

Vue.js 3.0，整个源码是通过 monorepo 的方式维护的，根据功能将不同的模块拆分到 packages 目录下面不同的子目录中，每个 package 有各自的 API、类型定义和测试。

使用Typescript来开发源码 Vue.js 2.x 选用 Flow 做类型检查，来避免一些因类型问题导致的错误，但是 Flow 对于一些复杂场景类型的检查，支持得并不好。

Vue.js 3.0 抛弃了 Flow ，使用 TypeScript 重构了整个项目。 TypeScript 提供了更好的类型检查，能支持复杂的类型推导；由于源码就使用 TypeScript 编写，也省去了单独维护 d.ts 文件的麻烦。

2. 性能优化：

引入tree-shaking的技术 tree-shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），通过编译阶段的静态分析，找到没有引入的模块并打上标记。像我们在项目中没有引入 Transition、KeepAlive 等不常用的组件，那么它们对应的代码就不会打包进去。
移除了一些冷门的feature Vue.js 3.0 兼容了 Vue.js 2.x 绝大部分的api，但还是移除了一些比较冷门的feature：如 keyCode 支持作为 v-on 的修饰符、$on，$off 和 $once 实例方法、filter过滤、内联模板等。

3. 响应式实现优化：

改用proxy api做数据劫持 Vue.js 2.x 内部是通过 Object.defineProperty 这个 API 去劫持数据的 getter 和 setter 来实现响应式的。这个 API 有一些缺陷，它必须预先知道要拦截的 key 是什么，所以它并不能检测对象属性的添加和删除。

Vue.js 3.0 使用了 Proxy API 做数据劫持，它劫持的是整个对象，自然对于对象的属性的增加和删除都能检测到。

响应式是惰性的在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。

在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，就没有那么大的性能消耗。

4. 编译优化：

生成block tree

Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的，单个组件内部需要遍历该组件的整个 vnode 树。

Vue.js 3.0 做到了通过编译阶段对静态模板的分析，编译生成了 Block tree。Block tree 是一个将模版基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的。每个区块只需要追踪自身包含的动态节点。

slot编译优化

Vue.js 2.x 中，如果有一个组件传入了slot，那么每次父组件更新的时候，会强制使子组件update，造成性能的浪费。

Vue.js 3.0 优化了slot的生成，使得非动态slot中属性的更新只会触发子组件的更新。动态slot指的是在slot上面使用v-if，v-for，动态slot名字等会导致slot产生运行时动态变化但是又无法被子组件track的操作。

diff算法优化

能力有限，说不清楚，可以看下这篇文章：https://blog.csdn.net/weixin_48726650/article/details/107019164

5语法api优化

优化逻辑组织使用 Vue.js 2.x 编写组件本质就是在编写一个“包含了描述组件选项的对象”，可以把它称为 Options API。我们按照 data、props、methods、computed 这些不同的选项来书写对应的代码。这种方式对于小型的组件可能代码还能一目了然，但对于大型组件要修改一个逻辑点，可能就需要在单个文件中不断上下切换和寻找逻辑代码。

Vue.js 3.0 提供了一种新的 API：Composition API，它有一个很好的机制去解决这样的问题，就是将某个逻辑关注点相关的代码全都放在一个函数里，这样在修改一个逻辑时，只需要改那一块的代码了。

优化逻辑复用在 Vue.js 2.x 中，我们一般会用 mixins 去复用逻辑。当抽离并引用了大量的mixins，你就会发现两个不可避免的问题：命名冲突和数据来源不清晰。

Vue.js 3.0 设计的 Composition API，在逻辑复用方面就会很有优势了。

2022 面试题

如题