前端满打满算也就学习了几个月，在学校和实习学的主要是后端方向，前端也就是在学校学了HTML+CSS。面试的是家这边的，本来以为会相对来说稍微简单一点，没想到刨根问底，不过还好没问我底层实现。

HTML+CSS

行块元素这个真的要必备，面试的3家其中2家问了这个(这两家是小公司问的)
首先问了行元素和块元素有哪些？然后我说了之后又接着问我他们之间的区别是什么？接着又问我如何给行元素设置宽高，如果文本域给我设置最大长度和宽度，如何让我在多余的行显示为省略号。

1. 行元素与块元素？它们之间区别？

行元素：

span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u

块元素：

div、h1-h6、form、p、ul、li、ol、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr HTML5：header、section、article、footer等

行元素与块元素区别？

行内元素只占据内容撑起来的区域，而块级元素占据了一整行的区域。
行内元素设置宽高不生效,块级元素设置宽高生效。
默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
行内元素margin-top和margin-buttom不生效，但是margin-left和margin-right 生效，块级元素都可以。\
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

<div></div>可以包含<span></span>,但是<span></span>不可以包含<div></div>。

2. 如何给行元素设置宽高

1、行内元素转换为块级元素或行内块元素

span{ 
	display: block; 
} 
或者 
span{ 
	display: inline-block; 
}

2、给行内元素添加浮动

span{ 
	float:left; 
} 
或
span{ 
	float:right; 
}

3、给行内元素添加绝对定位或固定定位

span{ 
	position:absolute
} 
或
span{
	position:fixed
}

3. 多行文本如何处理溢出？让它在多余行设置省略号？

单行文本框

	<style>
		p {
		          overflow: hidden;
		          text-overflow: ellipsis;
		          white-space: nowrap;
		          font-size: 16px;
		          width: 130px;
		   }
		</style>
	</head>
	<body>
		 <p>待到秋来九月八，我花开后百花杀</p>
	</body>

多行文本框

  div {
	width: 200px;
	display: -webkit-box;
	/* 显示几行 */
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	}
     <body>
	<div>
	    待到秋来九月八，我花开后百花杀。
	    冲天香阵透长安，满城尽带黄金甲。
	</div>
    </body>

4. 有没有用HTML+CSS实现复杂的demo？

我回答是跟着视频或者学习有作业布置的，一时半会想不起来有什么复杂的。但是平常用后端较多，用后端模仿写过。所以平常没事的写点小demo也可以预防一下。

5. 不定宽高如何设置垂直居中？

（background-color;height;width）这些不重要,重点背剩下的
方案一：

	<style>
	  .father{
		#FF8C00;
		width: 300px;
		height: 300px;
		position: relative;
		}
	.son{
		background-color: #F00;
		width: 100px;
		height: 100px;
		position: absolute;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		}
	</style>
	</head>
	<body>
		<div class="father">aaaa
		<div class="son">bbbb</div>
		</div>
	</body>

方案二：

	<style>
	  .father{
		background-color: #FF8C00;
		width: 300px;
		height: 300px;
		position: relative;
		}
	.son{
		background-color: #F00;
		width: 100px;
		height: 100px;
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		}
	</style>
	</head>
	<body>
		<div class="father">aaaa
		<div class="son">bbbb</div>
		</div>
	</body>

方案三：flex布局

<style>
	.father{
		background-color: #FF8C00;
		width: 300px;
		height: 300px;
		display: flex;
		justify-content: center;
		align-items: center;
		}
	.son{
		background-color: #F00;
		width: 100px;
		height: 100px;
		}
		</style>
	</head>
	<body>
		<div class="father">aaaa
		<div class="son">bbbb</div>
		</div>
	</body>

6. 伪元素？

::first-line 选择器匹配文本块的首行。
::first-letter 选择文本块的首字母
:before 在选中元素的内容之前插入内容
:after 在选中元素的内容之后插入内容

7. :ntn-child使用场景？查找第二个p？

我回答的查找类似列表这种下面内容

	<style>
	  div p:nth-child(2n){
		color: aqua;
		}
           或者
           p:first-child{
            color:red
           }
	</style>
	</head>
	<body>
	<div>
	  <img/>
	  <p>a</p>
	  <p>a</p>
	 </div>
	</body>

JS

1. 闭包？

闭包一个函数和词法环境的引用捆绑在一起，这样的组合就是闭包。
一般就是一个函数A，return其内部的函数B，被return出去的B函数能够在外部访问A函数内部的变量，这时候就形成了一个B函数的变量背包，A函数执行结束后这个变量背包也不会被销毁，并且这个变量背包在A函数外部只能通过B函数访问。
闭包形成的原理：作用域链，当前作用域可以访问上级作用域中的变量。
闭包解决的问题：能够让函数作用域中的变量在函数执行结束之后不被销毁，同时也能在函数外部可以访问函数内部的局部变量。
闭包带来的问题：由于垃圾回收器不会将闭包中变量销毁，于是就造成了内存泄露，内存泄露积累多了就容易导致内存溢出。

2. 箭头函数？

箭头函数相当于匿名函数，简化了函数定义。
箭头函数有两种写法:

当函数体是单条语句的时候可以省略{}和return。
另一种是包含多条语句，不可以省略{}和return。

箭头函数最大的特点就是没有this，所以this是从外部获取，就是继承外部的执行上下文中的this，由于没有this关键字所以箭头函数也不能作为构造函数，同时通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），第一个参数会被忽略。
箭头函数也没有原型和super。不能使用yield关键字，因此箭头函数不能用作 Generator 函数。不能返回直接对象字面量。

Vue

问我用多久，我说我用vue差不多半年时间。然后开始发问，在问vue的时候思路完全被带着走，我说一句就会被跟着问相关问题，差点想半路退出不面了。在生命周期的时候问我mounted之后？我说数据更新，问我如何更新？我说了v-model，又接着问我v-model如何实现的，再接着问父子之间如何通信等。

1.生命周期哪几个阶段？使用到的钩子函数有什么？

20200722162817855 (1).png

2.加载渲染的时候使用钩子函数？

父beforecreate->父create->父beforemount->子beforecreate->子create->子beforemount->子mounted

3.mountes之后发生了什么？

我回答的是数据更新。其实是mounted:将编译好的HTML挂载到页面完成后执行的钩子函数，此时可以发送ajax请求获取数据的操作进行数据初始化。但，mounted在整个实例声明内只执行一次。然后挂载完毕。

4.数据如何更新？

我回答的是用v-model绑定。我查的是使用页面的watch侦听事件，监控路由发生改变，则请求需要更新数据的方法（函数）。

5.v-model如何绑定数据？

在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。双向绑定的原理其实就是分为两步：模板编译和数据劫持

模板编译：分析模板tempalte，元素节点的属性如果存在v-html，v-model，{{ }}等属性，需要找到对应的数据，并进行渲染。

数据劫持：当数据data发生改变的时候，重新编译模板。（利用的是Object.defineProperty监听数据变化，watch方法对每个元素进行监听，发布订阅者模式订阅watch对象，发布watch对象中update方法）

6.父子组件如何通信？子组件数据变父组件也跟着变？

Vue组件的通信方式分为两大类：
父子组件的通信方式：父给子传递数据，通过给子组件添加自定义属性，比如："，list是父组件给子组件传递的数据。子获取父的数据，在子组件中使用props属性获取
子给父传递数据，通过给子组件传递父组件的方法，子组件调用父组件的方法传递数据，比如：" ,deleteHandler就是父组件的函数，在子组件中通过this.$emit('方法名',参数)，调用父组件的方法，并把数据传递到父组件。 props是只读，不可以被修改，所有被修改都会失效和被警告。

扩展

任何关系类型组件通信（父子、兄弟、非兄弟）方式： EventBus：使用方法是创建一个新的Vue实例，需要通信的组件都引入该Vue实例，传递数据的组件使用 event.$emit('名称',参数)发送数据，接收数据的组件使用 event.$on('名称',方法)接收数据。

7.`<v-if>`和`<v-show>`区别？`<v-show>`如何查找使用选择器？

作用: 都是控制元素隐藏和显示的指令
区别： v-show: 控制的元素无论是true还是false，都被渲染出来了，通过display：none控制元素隐藏。 v-show: 适合使用在切换频繁显示/隐藏的元素上。
v-if: 控制的元素是true，进行渲染，如果是false不渲染，根本在dom树结构中不显示。v-if: 适合使用在切换不频繁，且元素内容很多，渲染一次性能消耗很大的元素上。

8.computed和watch区别？

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch：更多的是观察的作用，支持异步，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

9.数据双向绑定的方法?

Vue3.0 是通过Proxy实现的数据双向绑定，Proxy是ES6中新增的一个特性，实现的过程是在目标对象之前设置了一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
用法： ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。 var proxy = new Proxy(target, handler);

target: 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

ES6

1. 用到es6哪些？

let const;## Promise;Set

2. promise?Promise.all()用过吗？Promise.race()用过吗？

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。es6规定，Promise对象是一个构造函数，用来生成Promise实例。 Promise是异步微任务，解决了异步多层嵌套回调的问题 Promise对象有以下两个特点。
（1）对象的状态不受外界影响。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。
Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

[5.26]前端面试