面试实战问题解答（3）

面试问题解答

vue传值汇总

父子传值：

父组件： 在引用子组件的时候输入   ：传值名称="传递数值"
子组件： 在javaScript中   poprs:['传值名称']

中央事件总线传值：

首先建立事件bus，我会新建一个bus.js文件；注册bus。
分别在组件中使用emit和on实现数据之间的通信；
发送方： Bus.$emit('传值名称',传值数值,传递数值)   //注意：此处可以传递多个数值；
接收方： Bus.$on('传值名称'，接收方法(传值数值,传递数值))

vuex传值：

新建vuex.store;
简单的应用
	state (全局变量的数据)
	getters (用来获取数据的方法)
	actions (跟后台接口打交道的方法)
	mutations (存储数据的方法)

路由传值：

在设置路由的时候，正常路径后面加上要传递值的字段：
如当要传递一个projetId时：
	设置：	path: '/pending-particulars/:projectId',  
	传递：	this.$router.push({path:'/pending-particulars/'+data.id});
	接收：	this.projectId = this.$route.params.projectId;

用params传递：
	设置：	path: '/Describe',  
	传递：  this.$router.push({path: 'Describe',params: {projectId: projectId}})
	接收：  this.projectId =$route.params.projectId

用query传递：
	设置：	path: '/Describe',  
	传递：  this.$router.push({path: 'Describe',query: {projectId: projectId}})
	接收：  this.projectId =$route.query.projectId

盒子居中

flex布局：

定位加margin: 利用css的 position属性，大小盒子子绝父相，然后小盒子top,right,bottom,left全部设置为0，然后margin :auto，自动对齐

定位：利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来

margin : 大盒子的宽减去小盒子的宽除以二就是小盒子margin-left的数值，大盒子的高减去小盒子的高除以二就是小盒子margin-top的数值；

css3新特性：利用css3的新增属性table-cell, vertical-align:middle;

箭头函数this

箭头函数中的this，指向与一般function定义的函数不同，箭头函数this的定义：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。

vue声明周期

创建期间的生命周期函数：

  beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
  created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
  beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

运行期间的生命周期函数：

 beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
 updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数：

 beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 

常用的伪类

:link            用这个可以设置未被访问的链接的样式

:visited        用这个设置已经被访问的链接的样式

:hover          用于设置将鼠标悬浮在链接上的样式

:active          用于设置鼠标点击链接时到鼠标松开时的样式

:focus            用于设置用键盘将焦点放在链接上时的样式（如用tab键或者上下键来移动页面焦点时）

:before和:after 在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素；

数据类型及其分类

数据类型分为两种基础类型和引用类型：

1. 基础类型：像Number、String、Boolean等这种为基本类型
2. 引用类型：Object和Array

基本类型值:基本类型值指的是存储在栈中的一些简单的数据段

在JavaScript中基本数据类型有String,Number,Undefined,Null,Boolean，在ES6中，又定义了一种新的基本数据类型Symbol,所以一共有6种

引用类型值：引用类型值是引用类型的实例，它是保存在堆内存中的一个对象，引用类型是一种数据结构，最常用的是Object,Array,Function类型，另外还有Date,RegExp,Error等，ES6同样也提供了Set,Map2种新的数据结构引用类型值

引用类型值是引用类型的实例，它是保存在堆内存中的一个对象，引用类型是一种数据结构，最常用的是Object,Array,Function类型，另外还有Date,RegExp,Error等，ES6同样也提供了Set,Map2种新的数据结构

深拷贝与浅拷贝

浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝（例：assign()）

创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

深拷贝是将对象及值复制过来，两个对象修改其中任意的值另一个值不会改变，这就是深拷贝（例：JSON.parse()和JSON.stringify()，但是此方法无法复制函数类型）

将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象