5.17笔记整理数广（别人的面经答案整理）

最新推荐文章于 2024-07-22 08:55:10 发布

「已注销」

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量129

点赞数

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

原文链接：https://blog.csdn.net/wandou9527/article/details/108376137?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165279767616781483767477%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=165279767616781483767477&biz_id=0&utm_med

版权

笔记专栏收录该内容

68 篇文章 0 订阅

订阅专栏

盒模型、怪异盒模型

标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。
标准盒大小计算公式：width(content) + padding + border + margin

怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。
怪异盒大小的计算公式：width(content + padding + border) + margin

get和post区别

1.Get，它用于获取信息，它只是获取、查询数据，也就是说它不会修改服务器上的数据，从这点来讲，它是数据安全的，而稍后会提到的Post它是可以修改数据的，所以这也是两者差别之一了。

2.Post，它是可以向服务器发送修改请求，从而修改服务器的，比方说，我们要在论坛上回贴、在博客上评论，这就要用到Post了，当然它也是可以仅仅获取数据的。

cookie、localStorage、sessionStorage区别

cookie、localstorage和sessionStorage三者都是在开发中用到的临时存储客户端会话信息或者数据的方法，下面就简单介绍一下三者的区别：

一、存储的时间有效期不同

1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效

2、sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效

3、localStorage的有效期是在不进行手动删除的情况下是一直有效的

二、存储的大小不同

1、cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息

2、localStorage和sessionStorage的存储容量是5Mb(官方介绍，可能和浏览器有部分差异性)

三、与服务端的通信

1、cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等。

2、localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信

vue组件通信

方法一、`props/$emit`

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:["Henry","Bucky","Emily"]

总结：父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

2.子组件向父组件传值（通过事件形式）

接下来我们通过一个例子，说明子组件如何向父组件传递值：当我们点击 “Vue.js Demo” 后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。

总结：子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

方法二、`$emit/$on`

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。
当我们的项目比较大时，可以选择更好的状态管理解决方案 vuex。

$on 监听了自定义事件 data-a 和 data-b，因为有时不确定何时会触发事件，一般会在 mounted 或 created 钩子中来监听。

方法三、vuex

在这里插入图片描述

方法四、`$attrs/$listeners`

1.简介

多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此 Vue2.4 版本提供了另一种方法---- $attrs/$listeners

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
有关 interitAttrs 详情可见 博客园鲁小风lyf 的文章 vue组件的inheritAttrs属性
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

方法五、provide/inject

1.简介

Vue2.2.0 新增 API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。一言而蔽之：祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

常见使用场景可以分为三类：

父子通信：
父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent/$children）；ref 也可以访问组件实例；provide/inject API；$attrs/$listeners

兄弟通信：
Bus；Vuex

跨级通信：
Bus；Vuex；provide/inject API、$attrs/$listeners

vuex

在这里插入图片描述

1.简要介绍 Vuex 原理

Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 进行，Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。而所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action，但 Action 也是无法直接修改 State 的，还是需要通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上。

2.简要介绍各模块在流程中的功能：

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行 dispatch 方法触发对应 action 进行回应。
dispatch：操作行为触发方法，是唯一能执行 action 的方法。
actions：操作行为处理模块，由组件中的 $store.dispatch('action 名称', data1) 来触发。然后由 commit() 来触发 mutation 的调用 , 间接更新 state。负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行，包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装，以支持 action 的链式触发。
commit：状态改变提交操作方法。对 mutation 进行提交，是唯一能执行 mutation 的方法。
mutations：状态改变操作方法，由 actions 中的 commit('mutation 名称') 来触发。是 Vuex 修改 state 的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些 hook 暴露出来，以进行 state 的监控等。
state：页面状态管理容器对象。集中存储 Vue components 中 data 对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
getters：state 对象读取方法。图中没有单独列出该模块，应该被包含在了 render 中，Vue Components 通过该方法读取全局 state 对象。

3.Vuex 与 localStorage

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法应该在 vuex 里数据改变的时候把数据拷贝一份保存到 localStorage 里面，刷新之后，如果 localStorage 里有保存的数据，取出来再替换 store 里的 state。

vue组件间通信六种方式（完整版）_C澒的博客-CSDN博客_vue组件通信方式
垂直水平居中

实现垂直水平居中的三种方法_JavaFeel的博客-CSDN博客_垂直水平居中的几种方法

方法一：使用position定位
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>实现垂直水平居中方法1</title>
	</head>
	<style>
		html,body,div{
			margin:0;
			padding:0;
		}
		body{
		height:100%;
		width:100%;
		}
		#center{
			width:200px;
			height:200px;
			background:red;
			margin:0 auto;/*实现水平居中*/
			position:relative;/*设置相对定位，移动div*/
			top:50%;/*将图片移动到中间*/
			margin-top:-100px;/*关键设置，定位移动后，只是相当于将一个元素上边界中心点居中，而元素div是有
			宽高的，应减去元素的高度的一半，让元素实现中心点居中*/
		}
	</style>
	<body>
		<div id="center">垂直水平居中</div>
	</body>
</html>

效果图片如下：

方法二:使用position和transform

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实现水平垂直居中方法2</title>
	<style>
			html,body{
				margin:0;
				padding:0;
				height:100%;
				width:100%;
			}
			#center{
			height:200px;
			width:200px;
			background:green;
			margin:0 auto;/*实现水平居中*/
			position:relative;/*设置定位，偏移量，让元素实现上下居中*/
			top:50%;
			transform: translateY(-50%);/*使用平移使图片居中，思想与方法一一致*/
			}
		</style>
	</head>
	<body>
		<div id="center">垂直水平居中</div>
	</body>
</html>

方法三：使用弹性盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实现水平垂直居中方法3</title>
	<style>
			html,body{
				margin:0;
				padding:0;
				height:100%;
				width:100%;
			}
			body{
				display:flex;/*打开弹性盒子（在父元素中使用）*/
				justify-content:center;/*控制水平居中*/
				align-items:center;/*控制垂直居中*/
			}
			#center{
			height:200px;
			width:200px;
			background:orange;
			}
		</style>
	</head>
	<body>
		<div id="center">垂直水平居中</div>
	</body>
</html>

CSS实现水平垂直居中的6种方式_前端学狗的博客-CSDN博客_css水平垂直居中

http状态码

200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。成功请求并创建了新的资源
301	Moved Permanently	永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302	Found	临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303	See Other	查看其它地址。与301类似。使用GET和POST请求查看
304	Not Modified	未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305	Use Proxy	使用代理。所请求的资源必须通过代理访问
400	Bad Request	客户端请求的语法错误，服务器无法理解
401	Unauthorized	请求要求用户的身份认证
402	Payment Required	保留，将来使用
403	Forbidden	服务器理解请求客户端的请求，但是拒绝执行此请求
404	Not Found	服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

监听器

Vue 学习——监听器（侦听器）：普通监听和深度监听_诗意的前端工匠的博客-CSDN博客_深度监听和普通监听的区别

一、什么是监听器
Vue提供了一个watch选项，提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步代码或者开销比较大的操作时，这个方式是最有用的。

二、普通监听
普通监听是简单的数据类型：数字，布尔值，字符串
写法一：设有两个参数，一个是新的数据，一个是旧的数据
在watch监听器中写的内容就是要监听的变量名（变化之后的值，变化之前的值），只要监听的值发生了变化，那么监听器中的函数就会被触发。

三、深度监听

watch里面msg（）{ }这种形式只是浅监听，只适合监听一层，如果想监听对象或者数组内部的值，这种形式就不适合了，这个时候需要深度监听，deep属性，它的默认值是false

跨域

原因：浏览器访问遵循同源策略，同源：协议/域名:端口要相同，当访问非同源地址就会出现跨域问题。

在vue中处理跨域的方法一般就是vue代理服务器proxy跨域。

vue生命周期

new对象过程

浅谈JavaScript new对象的四个过程_. . . . .的博客-CSDN博客

link

html引入css的方法

html如何引入css文件？HTML引入外部css文件的四种方法_程序员的生活1的博客-CSDN博客_html如何引入外部css样式

css中导入css

CSS系列之引入CSS的方式_DOGIOOH的博客-CSDN博客
怎么在html中导入css

html中css和js导入_八克的博客-CSDN博客
箭头函数

1、什么是箭头函数_abuanden的博客-CSDN博客_箭头函数

箭头函数与普通函数区别_star@星空的博客-CSDN博客_箭头函数都是匿名函数吗
vue路由

vue-router（路由）详细教程_Yin_Xiaobo的博客-CSDN博客_vue 路由
linux常用的指令
js事件委托

js 的事件委托: 子元素的事件监听交由父元素来统一处理
原理是事件冒泡机制, 即触发子元素事件, 也会冒泡到父元素事件上

事件委托好处:

节省资源, 当子元素个数较多, 且都要设置监听事件时, 可以统一设置到父元素上, 节省大量事件注册函数
对异步插入的子元素仍然生效. 如果不使用事件委托, 那么异步插入的子元素默认不会有任何事件注册, 需要显式声明. 而使用事件委托, 即便是异步插入的元素, 事件仍然可以处理到

promise调用三次什么方法实现

手写Promise（三）then的多次调用_18岁那年的博客-CSDN博客_promise 回调函数

Promise 专题一 promise的三种状态以及resolve，reject，then的实现_大白话程序猿的博客-CSDN博客_promise reject then

数组去重

js数组去重的10种方法_sun6sian的博客-CSDN博客_数组去重js

输出1000个数据中最大的十个有什么方法

海量数据处理大量数据中找出最大的前10个数（Top K 问题）_大树91的博客-CSDN博客_海量数据取top10

前端优化

【前端面试题】21道关于性能优化的面试题(附答案)_青铜小菜姬的博客-CSDN博客_前端性能优化面试题

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.17笔记整理数广（别人的面经答案整理）

盒模型、怪异盒模型标准盒模型又称W3C标准盒模型，其中标准盒模型的 width 等于 content 的宽度，标准盒模型的 height 等于 content 的高度。标准盒大小计算公式：width(content) + padding + border + margin怪异盒模型又称IE盒子模型，其中怪异盒子模型的 width 等于 content + padding + border 的宽度，怪异盒子模型的 height 等于 content + padding + border 的高度。
复制链接

扫一扫