深圳某公司，规模20人左右，目前还没有前端，笔试题如下。
1、rem和vw布局分别具有什么优缺点？
通过rem单位，可以实现响应式的布局，特别是引入相应的postcss相关插件，免去了设计稿中的px到rem的计算。rem单位在国外的一些网站也有使用，这里所说的rem来实现布局的缺点，或者说是小缺陷是：在响应式布局中，必须通过js来动态控制根元素font-size的大小。也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。
vw，不需要引入 JS 代码就能达到比 rem 更好的效果，并且相对于视口，所以在宽屏上也能很好的显示 vw的缺点：vw 虽然好用，但却有一个蛋疼的地方，因为相对于视口，所以失去了最大宽度/高度的限制， 可能你在宽屏上看到完美，竖屏上就不忍直视了。这时需要你额外为元素添加最大宽度/高度来限制
2、Flex和block布局有什么区别？
传统布局：基于盒模型，依赖 display属性 、position属性 、float属性；
flex布局：flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
3、Vue的生命周期是怎么样的？在每一个生命周期，vue分别会完成哪些操作？dom渲染是在哪一个阶段？
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框 n
extTick : 更新数据后立即操作dom
DOM 渲染在 mounted 中就已经完成了
4、vue是如何实现数据双向绑定的？请写出伪代码或描述其原理。
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
5、vue组件间是如何进行参数传递的？
1.父组件给子组件之间传值。
1）子组件再props中创建一个属性，用来接收父组件传过来的值。
2）在父组件中注册子组件。
3）在子组件的标签中添加子组件props中创建的的属性。
4）把需要传递给子组件的值赋值给该属性。
2.子组件给父组件之间传值
1）子组件中中需要以某种方式来触发一个自定义事件。
2）将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法。
3）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
3.兄弟组件之间的传值 创建一个vue实例作为“中转站”，通过vm.emit()方法发送数据。
6、在vue中，v-show和v-if区别？
答：v-if是真正的条件渲染。因为它会确保在切换过程中条件块内的事件监听器和子组件适当适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会才是渲染条件快。 v-show就简单多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS的“display”属性进行切换。 所以，v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show则适用于需要非常频繁切换条件的场景。
7、写出以下布尔判断结果（true或者false）
1）0==‘0’ true
2）‘’==undefined false
3）null==undefined true
8、websocket是如何保持长连接的
9、针对这个设计一个数据格式
const res = [{ name:'a',
moneny:0.01,
time: 100000
},{
name:'b',
moneny:0.01,
time: 100000
}]
function getData(res){
let timeArr = [...new Set(res.map(item=>getTime(item.time)))];
let data = [];
for(let i = 0;i < timeArr.length;i++){
let a = {};
a['time'] = timeArr[i];
let info = res.filter(item=>getTime(item.time)===timeArr[i]);
a['info'] = JSON.parse(JSON.stringify(info));
data.push(a);
}
return data;
}
function getTime(time){
let Time = new Date(time);
let year = Time.getFullYear();
let month = Time.getMonth();
let date1 = Time.getDate();
let newTime = new Date(year,month,date1,0,0,0);
return Number(newTime)
}
let res = [
{
name:'a',
money:0.01,
time:1606535884991
},
{
name:'a',
money:0.01,
time:1607895884991
},
{
name:'a',
money:0.01,
time:1606534444991
},
{
name:'a',
money:0.01,
time:1606535880000
},
{
name:'a',
money:0.01,
time:1234242542552
},
{
name:'a',
money:0.01,
time:1606535884991
}
];
console.dir(getData(res));
