面经篇（三）

1. label 属性、Babel/Webpack 分别讲一下，在项目中用到过吗？

1、Babel 是一个JS编译器，用来转换最新的JS语法，比如把ES6, ES7等语法转化成ES5语法。提供了一些插件转换最新的 api，如 babel-pilofill， 基于 core-js 和 regenerator. 也支持 React 的 JSX 语法。
2、Webpack 是一个打包工具，打包js文件，css文件，图片，html等等，可以分析文件结构，确定文件依赖，合并压缩js，加入hash，最终生成项目文件。

• babel JS新语法编译工具，不关心模块化
• webpack 打包构建工具，是多个loader plugin的集合

2. mixin 混入怎么处理同样的名字（覆盖），函数名相同（覆盖）还有一个什么相同是先后执行？

3. 加一个 background 哪些地方上色？

• background-color能控制的盒子模型内 的 content+padding+border中的颜色
• 如果 border 给了颜色，那就显示给的颜色，如果没给颜色（无色 透明得）那就是默认背景色。

4. v-if 和 v-show 的区别？

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器 和 子组件 适当地被 销毁 和重建，操作的实际上是 dom 元素的 创建和销毁。
• v-show 就简单的多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，它操作的是 display:none/block; 属性。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
• 因此，需要频繁的切换渲染，使用 v-show；
• 不频繁切换状态，运行时条件很少改变，则使用 v-if

5. 原型链中，定义一个 function 里面找不到的东西去哪里找？

当我们通过对象的实例读取某个属性，是有一个搜索的过程。它会先在实例本身去找指定的属性，如果找到了，则直接返回该属性的值，如果没找到，则会继续沿着原型对象寻找，如果在原型对象中找到了该属性，就返回该属性的值，找不到就返回 undefined。

6. 类型转换中的隐式转换在什么情况下出现？

什么是隐式转换？

• 在 JS 中，运算符在计算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算。
• 这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换。

7. 数组去重有哪些方法？（标明 ES6 的方法。）

// 利用 filter
function unique(arr) {
	return arr.filter(function(item, index, arr){
		return arr.indexOf(item, 0) === index;
	});
}
var arr = [1,1,'true','true',true,true,15,15,false,false,
undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
	console.log(unique(arr));

// 利用 ES6 Set 去重（ES6中最常用）
function unique(arr) {
	return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false,
undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
	console.log(unique(arr));

// 利用 for 嵌套 for，然后 splice 去重（ES5中最常用）
function unique(arr) {
	for(var i = 0; i<arr.length; i++){
		for(var j=i+1; j<arr.length; j++){
			if(arr[i] == arr[j]){  //第一个等于第二个，splice 方法删除第二个
				arr.splice(j, 1);
				j--;
			}
		}
	}
	return arr;
}
// NaN 和 {} 没有去重，两个 null 直接消失了

8. display:none 和 visibility:hidden 有什么区别？

区别1：占位

• display:none 是彻底消失，在文档流中不占位，浏览器也不会解析该元素。
• visibility:hidden 是视觉上消失了，可以理解为透明度为 0 的效果，在文档流中占位，浏览器会解析该元素。

区别2：继承

• visibility:hidden 具有继承性，给父元素设置 visibility 属性，子元素也会继承这个属性。但若重新给子元素设置 visibility:visible，则子元素又会显示出来。

区别3：使用 visibility:hidden 比 display:none 性能要好。

• display:none切换显示 block 时，页面会产生回流
• visibility：hidden 切换显示 visible 时，不会引起回流

回流：当页面中的一部分元素需要改变 规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。左右页面第一次加载时需要产生一次回流。

9. 清除浮动有哪些方法？

1. 额外标签法（在最后一个浮动标签后，新加一个空标签，给其设置clear：both;）（不推荐）

<div style="clear:both"></div>

2. 父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
3. 使用after伪元素清除浮动（推荐使用）

.clearfix:after {
	content:"";
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
---------IE6、7专门清除浮动的样式-----------
.clearfix{
	*zoom:1;
}

为什么要清除浮动？
因为浮动的盒子脱离标准流，如果父盒子没有设置高度，下面的盒子就会撑上来。

何时清除浮动呢？

1. 父级没有高度
2. 子盒子浮动了
3. 影响到下面的布局了

10. CSS选择器及它们的优先级

==============================权重公式

1. 标签选择器 （小组长）----------> 0，0，0，1
2. 类选择器 （班长） ---------------> 0，0，1，0 （类和伪类）
3. ID选择器 （班主任）-------------> 0，1，0，0
4. 行内样式 （校长 style=""）-----> 1，0，0，0
5. ！important （教育局 局长）---->∞最大（在样式属性后添加）

a{ color:green !important;}

1。 继承的权重是 0 --------------------->（0，0，0，0）

11. 父子组件传值的方式，子组件里面修改数据，父组件里边会不会改变？

父传子：props
子传父：$emit

分两种情况：

1. 当值是基本数据类型时，改变子组件中的值不会改变父组件中的值；
2. 当值是引用数据类型时，会直接改变父组件中的值。

原因：

1. 基本数据 本身存储在 栈中，props属于是把值全部拷贝下来。所以当子组件改变基本数据类型时，父组件中的值不会改变；
2. 引用数据 存储在 堆中，props相当于把数据 浅拷贝 下来，仅仅是把引用类型数据的 地址 拷贝在栈中，而它本身的内容还在堆中。所以当改变引用数据类型的数据时，父组件和子组件的props 保存的值得地址是一样的，对应地址的值也会一起改变。

如果不想父跟着子改变，怎么解决？

可以传对象 data， 需要将 data 处理， JSON.parse(JSON.stringify(data )) 两次转换后就解决了该问题；

注：JSON.stringify() 方法将 JS值 转换为 JSON 字符串
JSON.parse() 方法将 JSON 字符串 转换为 对象

但有缺点：当对象的值为 undefined、function、symbol时会在转换过程中被忽略。导致属性丢失。

12.怎么完成子组件里边修改数据让父组件里边的数据也改变？

父子组件双向绑定。

13. 父传子、子传父、兄弟组件通信