前端面试题--持续更新

丨疯小孩丨

已于 2023-03-30 18:02:39 修改

阅读量143

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript

于 2022-06-22 23:17:32 首次发布

本文链接：https://blog.csdn.net/weixin_42364397/article/details/125416970

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么html语义化（HTML语义化_jewfer的博客-CSDN博客_html语义化）

语义化html结构，使爬虫和设备可以更好解析。优势在于有利于seo、方便设备解析、语义化标签，解读起来更方便。如 footer、nav、header标签等。

css垂直居中几种方式

<--第一种-->

<div class="test-box" style="
    position: relative;
    height: 300px;
"><div class="test" style="
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
">2222</div></div>

<--第二种-->
<div class="test-box" style="
    display: flex;
    height: 300px;
    justify-content: center;
    align-items: center;
"><div class="test" style="
">2222</div></div>

<--第三种-->
<div class="test-box" style="
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw;
"><div class="test" style="
    display: inline-block;
    background-color: red;
">2222</div></div>

computed和watch区别（计算属性和侦听器 — Vue.js）

计算属性有缓存，大多数情况下，计算属性试用。当需要在数据变化时执行异步或开销较大的操作时，使用监听器。

vue生命周期(API — Vue.js）

初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed
keep-alive	activated	deactivated
后代组件的错误	errorCaptured

created和mounted区别（created和mounted的区别_在线小白www的博客-CSDN博客_created和mounted区别）

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成识图。
mounted：在模板渲染成html后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。

vue传值的方式

父传子：父组件绑定值，子组件props接值。
子传父：父组件绑定事件，子组件通过 $emit 传值。
兄弟之间通信：绑定一个全局vue实列，通过全局实列 $emit 去传，接收方通过全局实列 $on 去接。
ref：父组件通过 $refs 调用子组件的方法或者访问数据。
vuex：访问 store 里面的值。
$parent（$root获取根节点）：子组件通过 $parent 获取父组件的方法或者属性。
localStorage和sessionStorage：通过保存和取值，传值。
路由传值：router.push('/test?id=0')
$attrs（祖传孙）：父组件不需要用到的数据，祖传到孙组件，v-bind=“$attars”
$listeners（孙传祖）：孙传祖，v-on="$listeners"
全局变量：设置一个全局变量

vue路由 Hash 模式和 HTML5 模式区别

	hash	html5
是否有#	是	否
是否是锚点定位	是	否
兼容	ie8	ie10
复杂数据是否限制体积	是	否

webpack 中loader和plugin区别（loader | webpack 中文网）

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决 loader 无法实现的其他事。

localstorage 必知必会 | 菜鸟教程

cookie、localStorage和sessionStorage详解_Jane街灯的博客-CSDN博客_localstorage和sessionstorage和cookie

	cookie	localStorage	sessionStorage
过期时间	设置过期时间或者同sessionStorage	永久有效	只要关闭浏览器（也包括浏览器的标签页），就会被清空
文件大小	4K	5M	5M
域名限制	同源窗口下共享，可以让子域名继承	同源窗口下共享，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据	当前浏览器窗口下
默认请求中携带	支持	不支持	不支持
事件通知机制	不支持	支持	支持

偏函数

简单的理解偏函数，它是对原始函数的二次封装，是将现有函数的部分参数预先绑定为指定值，从而得到一个新的函数，该函数就称为偏函数。

felx ：1 表达的含义

flex:1 等于 flex-grow：1、flex-shrink：1、flex-basis：0%

内嵌H5与原生通信用的是什么

URL Scheme：

原生应用可以通过URL Scheme打开H5页面，并且在URL中传递参数，H5页面可以通过window.location.href获取URL参数。

优点：

使用简单，不需要额外的桥接代码。
可以通过URL传递参数，实现H5与原生应用之间的数据交换。

缺点：

只能进行单向通信，无法实现原生应用调用H5页面的方法。
不支持异步调用，数据传输量也受到URL长度限制。

JSBridge：

JSBridge是一种桥接技术，可以让H5与原生应用之间相互调用。原生应用通过注入JSBridge对象，提供一些调用接口，H5页面可以通过JSBridge对象调用原生接口；反过来，原生应用也可以通过JSBridge调用H5页面的方法。

优点：

可以实现双向通信，H5页面和原生应用之间可以相互调用方法。
支持异步调用，可以传输大量数据。

缺点：

需要额外的桥接代码，增加了开发成本。
由于每个原生应用的JSBridge实现不同，需要定制不同的JSBridge代码。

postMessage：

H5页面可以通过window.postMessage方法向原生应用发送消息，原生应用可以通过WebView的addJavascriptInterface方法注册一个JavaScript对象，实现对H5页面的监听。

优点：

可以实现双向通信。
支持异步调用，可以传输大量数据。

缺点：

需要额外的桥接代码，增加了开发成本。
由于每个原生应用的postMessage实现不同，需要定制不同的代码。

WebViewClient：

通过重写WebViewClient的shouldOverrideUrlLoading方法，可以拦截WebView的URL请求，实现H5页面调用原生应用的功能。

优点：

可以实现双向通信。
不需要额外的桥接代码。

缺点：

需要重写WebViewClient的shouldOverrideUrlLoading方法，增加了开发成本。
只能通过URL传递参数，数据传输量受到URL长度限制。

vue2 和 vue3区别

性能优化：Vue 3 对于性能进行了优化，通过使用 Proxy 对象替代 Object.defineProperty 方法，提高了响应式数据的性能。在编译过程中，Vue 3 使用了静态提升技术，可以减少渲染函数的创建和更新的时间。
Composition API：Vue 3 引入了 Composition API，这是一种基于函数的 API，可以更好的组织组件逻辑代码，提高代码的可读性和可维护性。与 Vue 2 相比，Composition API 更加灵活，可以更好的支持 TypeScript 等语言。
TypeScript 支持：Vue 3 对 TypeScript 的支持更加完善，包括提供了更好的类型推断和支持 TypeScript 类型的 Emits API。
重构 API 设计：Vue 3 对 API 进行了重构，更加统一和简单。例如，Vue 3 中的 $attrs 和 $listeners 等属性都被合并到了 v-bind 和 v-on 指令中。
改进了 Teleport（原名 Portal）组件：Vue 3 中的 Teleport 组件可以更好的支持多个 Teleport 目标。

总之，Vue 3 在性能、可读性、可维护性和 TypeScript 支持等方面都有所提升，对于 Vue 开发者来说，是一个非常好的升级选择。但是需要注意的是，Vue 3 与 Vue 2 在一些概念和 API 上有所不同，需要花费一些时间进行学习和适应。

什么是闭包？闭包运用的例子？

闭包是指一个函数能够访问并操作其外部函数中定义的变量，即使外部函数已经执行完毕，这些变量仍然能够被访问和操作。闭包通常用来创建私有变量和方法，以及实现高阶函数等功能。

下面是一个闭包的例子：

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2
counter(); // 输出 3

在上面的例子中，createCounter 函数返回了一个内部函数，这个内部函数访问了外部函数中的 count 变量，即使 createCounter 函数已经执行完毕，count 变量仍然可以被内部函数访问和操作。每次调用 counter 函数，都会输出 count 的值，并将其加一。

另一个闭包的例子是实现一个缓存函数：

function createCache() {
  let cache = {};
  return function(key, value) {
    if (value) {
      cache[key] = value;
    } else {
      return cache[key];
    }
  }
}

const cache = createCache();
cache('name', 'Tom'); // 设置缓存
console.log(cache('name')); // 获取缓存，输出 Tom

上面的例子中，createCache 函数返回了一个内部函数，这个内部函数访问了外部函数中的 cache 对象。每次调用内部函数，都可以设置或者获取缓存的值。这个缓存函数使用了闭包来实现一个私有的缓存对象，不会被外部函数访问到。

http请求有哪些方式，有什么区别。

GET：用于请求服务器返回某个资源的内容，通常用于读取数据。使用 URL 传递参数，请求参数会被暴露在 URL 中。
POST：用于向服务器提交数据，通常用于创建或更新数据。请求参数不会被暴露在 URL 中，而是通过请求体进行传递。
PUT：用于向服务器更新某个资源的内容，通常用于更新数据。与 POST 相比，PUT 请求是幂等的，即多次调用不会产生不同的结果。
DELETE：用于删除服务器上的某个资源，通常用于删除数据。与 PUT 相比，DELETE 请求也是幂等的。
HEAD：与 GET 类似，但是只返回 HTTP 头部信息，不返回实体内容。
OPTIONS：用于查询服务器支持的 HTTP 方法。
TRACE：用于查询服务器收到的请求内容，主要用于调试和测试。
CONNECT：用于建立与服务器的双向通信，通常用于 HTTPS 连接。

这些请求方式有以下区别：

GET 和 POST：最常用的两种请求方式，GET 请求通常用于读取数据，POST 请求通常用于提交数据。GET 请求参数会被暴露在 URL 中，而 POST 请求参数通过请求体传递，不会被暴露在 URL 中。
PUT 和 DELETE：PUT 请求通常用于更新数据，DELETE 请求通常用于删除数据。PUT 和 DELETE 请求都是幂等的，即多次调用不会产生不同的结果。
HEAD 和 OPTIONS：HEAD 请求与 GET 请求类似，但是只返回 HTTP 头部信息，不返回实体内容。OPTIONS 请求用于查询服务器支持的 HTTP 方法。
TRACE 和 CONNECT：TRACE 请求用于查询服务器收到的请求内容，主要用于调试和测试。CONNECT 请求用于建立与服务器的双向通信，通常用于 HTTPS 连接。

EventLoop

promise 和 stimeout

深复制几种方法

性能优化

继承

什么是原型、原型链？

bfc

keep-alive

v-model 实现

修饰符

Vuex 页面刷新数据丢失怎么解决

http2