怎么让一个不定宽高的div，垂直水平居中
答：1.父盒子设置： display：relative；
DIV设置 ：transform：translate（-50%，-50%）；position：absolue；top：50%；left：50%
2.felx布局；给父盒子设置 display：flex；align-item：center；justify-content：center；
position的几个属性以及作用。
答：1.static:默认位置；2.relative:相对定位,相对于自己的位置进行移动。3.absolute:绝对定位，如果父元素设置了relative或者absolute，那么会相对于父元素进行移动。4.fixed：固定定位,固定当前元素在屏幕内的某个位置。
闭包的作用是什么？优点及缺点。
答：正常函数执行完毕以后函数内部的变量会进行垃圾回机制被处理掉，但是闭包可以让函数执行完以后变量不被清理掉。优点：1.不受全局变量的污染。缺点：太过于占用内存，无法进行清除定时器和一些全局的变量。
什么是原型链？
答：当访问一个对象的属性时，如果这个属性没有，那么它回去proto中查找这个属性。如果proto中也没有那么就会再在构造函数的prototype的proto中查找。这样一层一层的嵌套关系我们称之为原型。
每一个函数创建的时候都会有一个自带的属性，这个属性指向一个对象，这个对象就是原型。
每个构造函数所创建出来的实例都可以调用这个原型里面的属性和方法。
原型本身就是一个对象
什么是行内元素？分别有哪些？
答：每个元素都会有一个display的属性，如果默认值为inline的就是行内元素。
行内元素：a,b,span,img,input,select;
块级元素：div,ul,ol,li,h1····，p；
router、routes、route的区别？
答：1.router：一般指的是路由实例。如：路由编程式导航的route指的就是当前路由对象1.router：一般指的是路由实例。如：路由编程式导航的$router.push()；
vue-router有哪几种钩子?
1.全局导航钩子 router.beforeEach(to,from,next).作用:跳转前进行判断拦截。
2.组件内的钩子。
3.单独路由独享组件。
操作DOM节点方法有哪些？
答：
1.访问节点：
document.getElementById();
document.getElementsByName(name);
document.getElementsByTagName();
document.getElementsByClassName();
2.创建节点
document.insertBefore(newNode,referenceNode); //在某个节点前插入节点
parentNode.appendChild(newNode); //给某个节点添加子节点
3.删除节点
parentNode.removeChild(node); //删除某个节点的子节点 node是要删除的节点
数组的方法有哪些？
答：1.增：push()；//向数组尾部添加，返回的是数组的长度。unshift() ；//向数组头部添加，返回的是数组的长度。splice(); //方法向/从数组中添加/删除项目，然后返回被删除的项目;()
2.删：pop(); //删除数组最后一项，并返回该项。shift()；//删除数组第一项，返回删除项；
3.改：splice()； slice()
4.查：indexOf()和lastIndexOf()
veu中watch和computed区别？
答：computed：计算属性。在数据没有改变时只执行一次，并做缓存处理。下次在用会拿到缓存的数据。当数据改变时，会从新计算。watch：监听属性。当数据发生改变的时候，会执行对应的函数。
computed的使用场景：一个数据影响多个数据 。
watch的使用场景：一个数据受多个数据影响。
pormise的状态
pormise一共三种状态分别为pending（进行中）/reslove（成功）/reject （失败），同时只能存在一种状态，并且当状态一旦发生了改变那么状态将无法在改变。
理解和使用Promise.all和Promise.race?
答：Promise.all：可以将多个Promise实例对象包装成一个实例对象。成功时会返回一个数组，数组中是每个实例成功的回调。失败时，则是调用最先失败那个回调。（参数为数组，传入的实例对象）
Promise.race：传入的参数为数组，数组里面每一项都代表实例对象。传入的实例对象那个获取结果快就返回那个，不管是失败还是成功。
vue-router中的query和params的区别？
答：query可以获取到url地址后面的数据，params可以获取到请求当中的数据；
query用path来引入，params只能用name来传递，不能使用path
箭头函数和普通函数的区别？
- 箭头函数
1.箭头函数this指向的是所在函数的上下文。
2.箭头函数中的this是无法改变的。
3.箭头函数不可以用new 构造函数。 - 普通函数
1.普通函数的thi一般会指向调用者，或者window。
2.普通函数可以使用bind，apple，call方法改变。
改变this得方法有哪些？区别是什么？
- call（） 方法，第一参数是绑定this的值，当第一个参数为null，undefined时this指向的window。后面传入的是一个参数列表。
- apply（）方法，第一参数时绑定this的值，当第一个参数为null，undefined时this指向的时window。第二个参数时一个数组。
- bind（）方法，第一个参数是绑定this的值，第二个参数开始是接收的参数列表。bind方法不立即调用。
其实call和apply的方法差不多，当函数需要传多个变量的时候，apply可以接受一个数组作为参数输入， call 则是接受一系列的单独变量。简单说就是：apply可以传递数组，而call可以只能接收单个变量。
bind返回对应函数, 便于稍后调用； apply, call则是立即调用。
移动端的300ms的延迟会造成哪些问题？怎么处理？
问题：会造成页面缩放。
解决：禁用缩放。当HTML文档头部包含如下meta标签时：
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
数组遍历（map，filter，reduce，find，forEach）这些遍历的区别？
- map 遍历源数组，生成新得数组，将数组得每一项元素拿出来处理完成之后在放回去，并返回一个新得数组
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.map(function(item){
return item>10?item:"0"+item
})
- filter 遍历数组，生成新得数组，判断每一个值得返回结果是否为true，是true得放进去
var arr = [1,2,3,4,5,6,7,8]
var newArr = arr.filter(function(item){
return item>5
})
console.log(newArr)
- reduce主要是为了对所有数组经行累加，最后返回一个值，不改变原来的数组
var arr = [1,2,3,4,5,6,7,8,9,10]
var newArr = arr.reduce(function(prev,current){
return prev+current
},0)
console.log(newArr)
- find遍历找到第一个与之匹配的值
var Arr = [1,2,3,4]
Arr.find(function(value,index,arr){
return value<2
})
- forEach只是简单的遍历数组
var Arr =['a','b','c','d']
Arr.forEach(function（item）{
console.log(item)
}）
事件冒泡，事件捕获，事件委托（事件代理）
- 事件冒泡：当页面多元素嵌套时，给嵌套在内部的元素注册事件，并触发事件。事件会一层一层向外触发直到根节点。这叫做事件冒泡。
阻止事件冒泡： event.stopPropagation(); IE中阻止事件冒泡：attachEvent（）； - 事件捕获：当页面多元素嵌套时，给嵌套在内部的元素注册事件，并触发事件。事件会从跟节点一层一层触发直到事件触发的元素。这叫做事件捕获。
- 事件委托（事件代理）
注意：事件代理是通过事件冒泡完成的，如果禁止了事件冒泡那么就无法监听。
<body>
<ul id="isUl">
<li id="li01">1</li>
<li id="li02">2</li>
<li id="li03">3</li>
</ul>
<script>
function clickLi01() {
alert('你点击了第1个li');
}
function clickLi02() {
alert('你点击了第2个li');
}
function clickLi03() {
alert('你点击了第3个li');
}
document.getElementById('isUl').addEventListener('click', function(event) {
var srcID = event.target.id;
if(srcID == 'li01'){
clickLi01();
}else if(srcID == 'li02') {
clickLi02();
}else if(srcID == 'li03') {
clickLi03();
}
});
</script>
</body>
vue中的nextTick（）和$set（）的区别
- nextTick：当页面的数据发生改变的时候，想要对更新后的DOM进行操作，可以用nextTick去完成DOM的更新。这是一个异步操作。
- set: 当你要展示在页面中的数据，不在data的初始化中时，要调用set去向数据中添加，触发一个视图的更新。或者要想给对象添加一个属性时也要用到。
网友评论