面试2【DAY52】

qq_42775808

于 2023-06-02 16:35:49 发布

阅读量593

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42775808/article/details/130988175

版权

1.Vue的响应式原理：

当数据发生改变时，相关DOM元素会进行更新。他是依靠vue的绑定机制实现的

通过Object.defineProperty()和Proxy方法，使用getter和setter方法进行数据劫持

但是Object只能劫持对象的属性，Proxy 可以代理整个对象，可以捕获更多的行为

vue3里面proxy用的比较多

2.Keepalive：

Keepalive是用来缓存组件的，当组件频繁切换时可以使用它

使用keep-alive包住以后，我们发现，我们勾选、输入、下拉选择的内容，在路由来回切换

的时候，就不会丢失了，即使用keep-alive保存了之前的组件状态

（使用大部分的时候，如果仅仅几个页面不用他，那可以使用开关来控制页面是否显示

这个时候Keepalive比开关高效）（v-if或者v-show）

在data里面把开关设置为true，然后在method里面修改开关的值，然后样式可以根据v-if

来决定是否显示

3.关于Teleport3的组件了解？

Teleport 用于将某个组件的内容渲染到指定的目标 DOM 节点中。

不会被原有的 div 容器包含，从而实现了弹出框的功能。

4.关于移动端适配：

AutoPrefixer用来兼容不同浏览器，正确显示样式

PostCSS-px-to-viewport 可以将px单位转换为vw等视口单位

可以解决在不同设备上显示不一致的问题

还有就是设置 meta 标签的 viewport 属性

rem的话是相对根元素字体大小来计算值（html的font-size）

还有相对视口按照百分比的，vw、vh

相对父元素的直接就是%

5.移动端原生组件Webview

WebView 是 Android 平台上提供的一个显示网页内容的组件，可以在应用程序中嵌入 WebView，让用户在应用程序中直接浏览网页内容，无需打开浏览器。

6.原生和H5之间通信的方法：

schema通讯

“schema 通讯” 可以理解为应用程序之间透过特定的消息格式和接口进行的通信方式

全局挂载（使用较少）

封装JSBrigdge

JSBridge是如何实现调用的？

1.注册（把你的方法告诉webview我的方法是这么用的)

2.发送(把当前绑定过的方法和参数发送给webview）

3.调用（已经注册了，webview可以随意调用）

7.媒体查询

max-width 和 min-width：用于定义设备的最大宽度和最小宽度，通常用于响应式设计中。

8.CSS预处理器

好处是可以使用变量、嵌套、mixin之类的高级语法

相比原生CSS代码量小，易于维护

9.在父组件中如果要使用子组件：

可以使用插槽。在父组件中使用 <slot> 标签，在子组件模板中使用对应的插槽内容

也可以使用ref，通过$refs属性访问

10.复用组件的方法：混入（mixin）

可以在多个组件之间共享选项，类似于组件继承，可以实现代码复用和组件复用

也可以利用mixin来定义全局变量。只要你引入mixin，就可以直接用this来引用

11.子组件调用父组件的方法:(emit)

假设有个子组件的按钮点击之后要触发父组件的事件，父组件可以接收子组件发出的事件，

并在事件处理程序中访问传递的数据。

12.动态样式的实现方法

1.通过document的方法找到样式的id，然后修改他的style属性

2.给列表项设置2种不同名称的样式(例如others和active），然后

通过三目运算符，通过开关变量的值来决定不同样式

同时可以绑定事件，通过事件来改变开关变量的值

13.局部路由守卫的实现

如果要让一个组件在非登录界面才显示，需要用到局部路由守卫的思想

因为哪怕在生命周期函数里面最早的里面进行判断，页面都会先进行加载，

导致最后必须通过刷新才能够显示出来。如果要在页面加载前就进行判断

需要进行路由守卫

router.beforeEach 注册全局的前置路由守卫函数，这个函数会在每一个路

由跳转之前被调用。

14.Vuex

vuex可集中存储应用和数据。可以统一管理和维护应用的状态

可以使用Vuex中的store库，实现状态的响应式更新。

通过state存储应用状态，他有一个store的库，通过 mutation来修改store的值

可以通过 $store.state.xxx 访问属性值。$store.commit 调用 Mutation

每个mutation都有一个字符串名称和回调函数

通过getter对state的值进行计算，提供对外的接口

15.虚拟DOM

虚拟DOM可以避免DOM的重排和重绘，提升页面渲染性能。他是对比上一次

虚拟DOM树和当前虚拟DOM树的差别，然后把差别应用到真实的DOM上

16.重绘和重排

重排指的是当DOM元素布局发生变化时，浏览器需要重新渲染到页面上

重排会影响页面性能

重绘时元素的样式发生变化（比如颜色）浏览器只改变元素外观，不改变

元素的属性。

优化方法：

将多次DOM操作合并成一次

使用缓存技术（比如keepalive）

优化CSS的样式，避免使用影响布局的属性

17.JavaScript 事件循环是什么？

JavaScript 是单线程编程语言,所以我们可以把长时间执行的代码

放到回调函数之后执行。异步操作会在下一次事件循环的时候被执

行，JS里面的同步操作和异步操作是交替执行的

console.log(1);

setTimeout(() => {
	console.log(2);
}, 0);

let promise = new Promise((resolve) => {
	console.log(3);
	resolve();
})
	.then((res) => {
		console.log(4);
	})
	.then((res) => {
		console.log(5);
	});

console.log(6);

答案：依次输出 1 3 6 4 5 2。按照顺序执行代码：

遇到 console.log 打印 1
setTimeout 是 Web API，设置定时器，时间到后加入调用队列中
new Promise() 中传递的函数立即执行，因此打印 3
.then() 调用都加入任务队列
遇到 console.log 打印 6
查看任务队列，有两个 Promise 创建的微任务，依次打印。
setTimeout 的任务加入任务队列。最后执行打印 2。

18.为什么需要 Promise？

Promise是一种异步操作的语法，用来解决回调地狱的问题

因为随着嵌套增多，维护难度也会变大。Promise通过链式方法对这些promise对象进行处理

他有三种状态，pending（等待中）、fulfilled（已成功）和 rejected（已失败）。

19.Vue生命周期钩子函数包括那些？调用顺序是什么样的？

beforeCreate

created

beforeMount

mounted

updated

activated

beforeDestroy：

destroyed：

创建-》挂载-》更新-》销毁

20.行内元素和块级元素有哪些？

行内元素通常只占据文本的空间，不会独占一行；

常见的行内元素包括 a、span、i（或 em ）等。

块级元素通常独占一行

常见的块级元素包括 div、p、h1~h6、ul、ol、li、form、table、hr

21.使用CSS让元素水平居中？

1.flex居中法：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2.绝对定位法：

通过在子元素上设置 position: absolute 将其定位在父容器的正中间，并使用 transform 配合 translate 进行微调，使其在水平和垂直方向分别居中

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3.table-cell 居中法

通过在父元素上设置 display: table-cell 和 vertical-align: middle 属性，子元素就可以实现在水平和垂直方向同时居中了。

.parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

4.grid 布局法

使用 CSS 的 Grid 布局也可轻松实现元素在水平和垂直方向同时居中，用 grid 布局需要将父元素设置为grid容器，然后通过place-item居中即可。

.parent {
  display: grid;
  place-items: center;
}

22.什么是跨域？怎么解决跨域问题

跨域是一种同源策略限制，防止数据被恶意篡改。跨域问题一般是指浏览器或者JS在执行Ajax请求的时候收到了同源策略的限制，导致请求失败。

解决方法：

JSONP

JSONP 是一种常见的跨域解决方案，它利用 script 标签的 src 属性可以跨域访问的特点，通过在服务端动态生成 JavaScript 代码并返回，前端通过 script 标签引入该 JavaScript 代码，从而跨域获取数据。JSONP 的缺点是只支持 get 请求，不能使用 post 等其他请求方法，同时也存在一定的安全风险。

CORS

是官方推荐的跨域解决方案，它通过在服务端设置相应的响应头信息，允许浏览器跨域请求获取数据，可以使用任意 HTTP 方法，同时也提供一些安全措施，例如 csrf 风险的防御等。使用 CORS 需要服务端支持，在响应头设置 CORS 相关的信息，包括 Access-Control-Allow-Origin、 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等。

代理

使用代理是另一种常见的解决跨域问题的方式，可以通过在服务端设置代理服务器将前端请求代理到服务端，从而绕过浏览器的同源策略限制。代理方案需要在服务端进行相应的处理，并增加了服务端的负担，但优点是可以支持所有请求方法，并且相对较为灵活。

postMessage

HTML5新特性，给要操作的目标窗口对象和数据设置属性，在前端页面采用postMessage方式传递数据到目标服务器，从而实现跨域请求

23.cookie、sessionStorage、localStorage的区别

1.存储容量

cookie 存储容量较小，通常不超过 4KB。localStorage 和 sessionStorage 存储容量较大，可以存储 5MB 或更大的数据量，而且它们可用空间相互独立，互不共享。

2.存储位置

cookie 存储在客户端浏览器中，每次请求都会自动携带，所以可能会影响请求速度。而 localStorage 和 sessionStorage 存储在客户端浏览器缓存中，不会自动携带，只有在页面中使用 JavaScript 读取和写入时才会访问。

3.有效期

sessionStorage 只能保持在当前会话期间内有效，关闭页面或浏览器后数据会被清除。

localStorage 不主动过期，除非用户清空浏览器缓存或者通过 JavaScript 代码删除数据，否则数据会一直存在。

4.作用域

cookie 作用于整个域名，而 localStorage 和 sessionStorage 只作用于当前源（当前域名和协议）。即如果同时打开两个不同的窗口，它们共享 cookie，但是 localStorage 和 sessionStorage 数据是互相独立的，一个窗口的存储内容不会影响另一个窗口的存储内容。

24.cookie的作用

可以便于网站识别用户，保存一些偏好设置，进行个性化推荐，分析用户数据

25.html5语义化标签有哪些

header：文档或区域的页眉部分，一般包含标题、logo、导航等内容。

nav：用于容纳导航链接的块元素。

article：一篇独立的文章

26.css优先级顺序

1.！important

2.行内样式（通过style直接在标签内定义）

3.ID选择器：通过*id来选择元素的样式

4.类选择器、伪类选择器

5.标签选择器、伪元素选择器

应该尽量避免使用 !important，减少使用行内样式，用类选择器和 ID 选择器来控制样式

27.css实现三角符号

1.可以利用 border 属性来创造一个等腰三角形，同时将边框颜色设置为 transparent(透明)，达到只显示三角形的效果

将 div 宽度设置为 0，高度设置为 0，三条边框分别设置为透明，底部边框设置为实色，即可绘制出一个黑色等腰三角形。

.triangle-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #000;
}

2.利用 CSS3 新增的 transform 属性和伪元素

利用伪元素 :before 或 :after 生成一个正方形，然后将其旋转 45 度，达到仅显示一个等腰直角三角形的效果

28.apply、call和bind的作用和区别

apply、call 和 bind 都是用来改变函数的 this 指向的方法。细节上有微小差别，但是都差不多