2022 面试题1. 路由钩子 2. promise 和 async await的区别 - promise和 async

```
路由钩子
```

promise 和 async await的区别
 - promise和 async await  都是写异步代码的新方式
 - async await 是基于Promise实现的，不能用于普通的回调函数
 - async await 和 Promise 都是非阻塞的
 - async await使得异步代码看起来像同步代码
 
 async await相对于Promise的优点是：
  - 使代码看起来更加简洁
  - async await配合try catch 使用可以捕捉 同步和异步错误，
  - 更容易调试，使用async await 不需要更多的箭头函数
 总结： 1、promise和 async await  都是写异步代码的新方式
       2、async await 是基于Promise实现的，不能用于普通的回调函数
       3、async await 使代码看起来更加简洁
       4、async await配合try catch 使用 可以捕捉同步和异步错误
       5、更容易调试，使用async await 不需要更多的箭头函数

jquery中onLoad 和 ready的区别
- window.onload是在网页中做有的元素完全加载到浏览器后开始执行
- ready()是指DOM载入就绪时就对其进行操作，并调用执行绑定的函数；document.ready文档结构加载完成
- onload事件触发，表示页面包含图片等文件在内的所有元素加载完成

xss 攻击
- 转议 输入框中的左箭头，右箭头
- 将cookie 设置为httpOnly，不让黑客劫去
   response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly")
-

按钮权限控制
- https://juejin.cn/post/6932744687660990477

```
路由跳转
```

圣杯布局和双飞翼布局
-  圣杯布局当center的布局 padding-left 大于 center的宽，会发生布局错乱
-  双飞翼布局多加了一层dom节点

```
浏览器兼容
```
```
this的指向
```
```
网格布局
```
```
组件通信
```
```
v-model的实现原理
```

经常用到的指令
- V-ON,v-bind,v-if,v-show,v-for,v-html,v-text,v-model,v-once

修改子组件传参，为什么要用到深拷贝

```
用promise封装http
```
```
判断代码运行时的环境
```

BFC
- 1、解决兄弟组件外边距塌陷，给其中一个盒子外面 套一个盒子，设置overflow：hidden属性
- 2、清除浮动
- 避免正常元素压在浮动元素下面，直接给正常元素加overflow:hidden

1px 细线
- 媒体查询利用设备像素比缩放
- 设置border-image（这个需要ui做1px的线）
- transform:scale(.5)