2019/6/12面试题总结
1.v-if和v-show的区别
v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.
v-if 也是惰性的,如果在初始渲染时条件为假,那么什么都不做- - 直到条件第一次为真的时候才会开始渲染条件块,相比之下,v-show
就简单得多- - 不管初始条件是什么,元素总会被渲染,并且只是简单的基于css进行切换.
一般来说,v-if 有更高的切换开销,而 v-show 有更高的出事渲染开销.因此,如果需要非常频繁的切换,那么使用v-show好一点;如果在
运行时条件不太可能改变,则使用v-if 好点.
2.父子组件和子父组件传值
父向子用 prop
子向父用$emit
3.rem em
em：子元素字体大小的em是相对于父元素字体大小
rem：rem是全部的长度都相对于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
4.深拷贝和浅拷贝
如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。
如何实现浅拷贝
`let a=[0,1,2,3,4],
b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);
`
如何实现深拷贝：
`function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
let a=[0,1,[2,3],4],
b=deepClone(a);
a[0]=1;
a[2][0]=1;
console.log(a,b);`
JSON.stringify与JSON.parse除了实现深拷贝，还能结合localStorage实现对象数组存储 const obj1 = JSON.parse(JSON.stringify(obj));
extend方法
$.extend( [deep ], target, object1 [, objectN ] )
deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。
let a=[0,1,[2,3],4],
b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);
5.vue的computed和watch
https://segmentfault.com/a/1190000012948175 多看
computed:是一个计算属性,类似于过滤器,对绑定到view的数据进行处理
watch:是一个观察的动作
可以监听简单数据类型复杂数据类型和简单对象属性和复杂对象属性
6.promise和async和await
在前端编程中，会遇到这样一个场景：我们需要发送多个请求，后面请求的发送总是需要依赖上一个请求返回的数据。对于这个问题，我们既可以用的Promise的链式调用来解决，也可以用async/await来解决，然而后者会更简洁些。
使用Promise链式调用来处理：
`function request(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(time)
}, time)
})
}
request(500).then(result => {
return request(result + 1000)
}).then(result => {
return request(result + 1000)
}).then(result => {
console.log(result)
}).catch(error => {
console.log(error)
}) `
使用async/await的来处理：
`function request(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(time)
}, time)
})
}
async function getResult() {
let p1 = await request(500)
let p2 = await request(p1 + 1000)
let p3 = await request(p2 + 1000)
return p3
}
getResult().then(result => {
console.log(result)
}).catch(error => {
console.log(error)
})`
相对于使用then不停地进行链式调用， 使用async/await会显的更加易读一些。
7#### vuex的应用场景
如果数据还有其他组件复用，建议放在vuex
如果需要跨多级组件传递数据，建议放在vuex
需要持久化的数据（如登录后用户的信息），建议放在vuex
跟当前业务组件强相关的数据,可以放在组件内
就是说除了非父子数据传递（兄弟、祖孙、任意组件间等）外，Vuex 还有一个重要价值是：将分散于多个组件的状态操作统一到一个节点中。这意味着，当你需要对某个状态做进一步的、无关组件具体行为的处理时，你只需要对接 Vuex Store 就可以了
