## v-if和v-show的区别，分别适合什么场景

v-if 操作的实际上是 dom 元素的创建或销毁。v-show 操作的是display:none/block属性。频繁地切换使用 v-show，否则使用 v-if。

## async await 关键字的用途

async await 是es7里面的新语法，async 用于声明一个异步函数，await 阻塞等待一个异步方法执行完成。

## Cookie 、LocalStorage 、 SessionStrorage的区别

- Cookie 是 http 协议的组成部分，会在同源 http 请求中携带，数据根据不同浏览器限制，大小一般不能超过4k
- LocalStorage 和 SessionStrorage 仅会持久化存储，大小一般是5M

## Vue组件中的data为什么是一个函数而不是一个对象

组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一 个会影响其他

## 用CSS3让一个div垂直居中怎么写

#### transform
```
#container {
  position: relative;
}
#center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

#### flex
```
#container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

## 谈谈性能优化案例

减少 http 请求次数、压缩上线代码、懒加载、动态渲染组件、CDN。

## Vue实例挂载在哪个标签

body 标签里，在 vue 中是获取不了 body 标签的，需要用原生js获取

## 用过Map和Set吗，Set和数组的区别是什么？Map和Object的区别

set 是 es6 提供的一种新的数据结构，它类似于数组，但是成员的值都是唯一的。
map 是 es6 提供的一种新的数据结构,它类似于对象，也是键值对的集合，但是键的范围不仅限于字符串，各种类型的值都可以当做键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供 了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

## 图片懒加载是怎么实现的？

就是我们先设置图片的 data-set 属性（当然也可以是其他任意的，只要不会发送 http 请求就行了，作用 就是为了存取值）值为其图片路径，由于不是 src，所以不会发送 http 请求。然后我们计算出页面 scrollTop 的高度和浏览器的高度之和， 如果图片距离页面顶端的坐标 Y（相对于整个页面，而不是浏览 器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时 候我们再将 data-set 属性替换为 src 属性即可。

## 怎么防止被CSRF和XSS攻击

- CSRF （ Cross-site request forgery ）跨站请求伪造
  - Token 验证
  - 把token放在header
  - Referer 验证，只接受本站的请求，服务器才做响应，如果不是就拦截
- XSS（Cross Site Scripting）跨域脚本攻击
  - 对用户输入的数据进行 HTML Entity 编码
  - 移除用户输入的和事件相关的属性。如 onerror 可以自动触发攻击，还有 onclick 等
  - 移除用户输入的 Style 节点、 Script 节点、 Iframe 节点。

## Vue3的组件式API和选项式API的区别

- 选项API，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑。
  - 如果是小组件，适合用选项式API
  - 如果是大组件，属性的列表很长，会导致组件难以阅读和理解
- 组件式API根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起，更高内聚、低耦合。
  - 对 tree-shaking 友好，代码也更容易压缩
  - 几乎用不到this，避免了this指向不明的情况

## Vue3是通过哪些方面提升性能的

- 编译阶段
  - diff算法优化
  - 静态提升
  - 事件监听缓存
  - SSR优化
- 源码体积
  - Tree shanking：清除多余代码，优化项目打包体积
  - 任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小
- 响应式
  - vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式
  - vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历

## Vue3新增的组件

- Fragment 不再限制 template 只有一个根节点
- Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中
- Suspense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验