1.v-for中为什么要用key
vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。 最好用id这种唯一标识 没有时再用index
2.vue2和vue3的区别
1. vue2和vue3双向数据绑定原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert() di fai te po rao po s（读音） 对数据进行劫持 结合 发布订阅模式的方式来实现的。
vue3 中使用了 es6 的 ProxyAPI po rao ke sei 对数据代理。 优势可以省去for in、闭包等内容来提升效率， 对对象全对象监听，可以监听数组
2.可以拥有多个根节点
3.可以用方法（function）进行分组 不再需要data,computed属性，methods进行分组
4.生命周期钩子 setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
3.深拷贝
1.对象的浅拷贝：浅拷贝是对象共用的一个内存地址，对象的变化相互影响。
2.对象的深拷贝：简单理解深拷贝是将对象放到新的内存中，两个对象的改变不会相互影响
3.可以用lodash的函数库 lodash.cloneDeep()实现深拷贝。
4.Cookie和Session的区别
- cookie的数据是存放在客户端浏览器上的，而session的数据是存放在服务器上的。
- cookie不是很安全的，放在本地的cookie容易遭人篡改； session放在服务器端很安全，但是又会占用服务器的资源。所以一般会配合使用。
- session中保存的是对象，cookie中保存的是字符串的键值对。
- cookie如果配置好要跨域访问的域名后是可以支持跨域的，而session是不支持跨域访问的。
- Session是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在数据库、文件中；Cookie是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现Session的一种方式
5.H5的新特性
语义化标签：header，main, footer，section文章一节，article文章
媒体元素，audio音频、video视频
canvas svg绘图 SVG适用于描述XML中的2D图形的语言 不依赖分辨率 支持事件处理器 Canvas随时随地绘制2D图形 依赖分辨率
存储方式：sessionStorage、localStorage
WebStorage是HTML新增的本地存储解决方案之一 WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制
6.浏览器优化
1.减少http请求，合理设置 HTTP缓存 ① 简单的图片效果可以使用html+css、canvas或者svg来替换。② 合并CSS、合并javascript、合并图片（webPack等包管理工具）③ 图片格式，大小选择，图片优化
2.应用浏览器缓存
http缓存 cookie localStorage 没有时间限制的数据存储 sessionStorage 在浏览器关闭的时候就会清除。
3.压缩
在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。
4.使用图片精灵 雪碧图
5.图片懒加载 Vue-lazyload
6.CSS放在页面最上部，javascript放在页面最下面
7.路由守卫
router.beforeEach 注册一个全局前置守卫： 全局前置守卫：初始化时执行、每次路由切换前执行
（多用 ） 判断有没有token 是不是登录页
router.afterEach 注册一个全局后置守卫： 全局后置守卫：初始化时执行、每次路由切换后执行
参数：to: 即将要进入的目标 from: 当前导航正要离开的路由
next: 调用该方法来控制接下来的行为
8.vuex
1.state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.
2.getters相当于计算属性 getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
3.mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是自定义的参数. 用commit获取传参 this.$store.commit('store名', 2);
4.actions类似于mutaions 但actions中可以包含异步操作,
setTimeout( () => { context.commit( 'minusPrice', payload ); //context提交 }, 2000)
回调：this.$store.dispatch('store名', 5);
9.promise和async await区别
1 promise是ES6，async/await是ES7
2 async/await相对于promise来讲，写法更加优雅
3 reject状态：
1）promise错误可以通过catch来捕捉，建议尾部捕获错误，
2）async/await既可以用.then又可以用try-catch捕捉
4 async/await使得异步代码看起来像同步代码
10.默写冒泡排序
// 冒泡排序（从大到小）
let arr = [5, 3, 1, 4, 2];
function bubbleSort (arr) {
let len = arr.length;
for (let i = 0; i < len; i++) {
for (let j = 0; j < len - i - 1; j++) {
if (arr[j] < arr[j + 1]) {
// 交换使用结构赋值
[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
}
}
}
return arr;
}
console.log(bubbleSort(arr));//[ 5, 4, 3, 2, 1 ]
（从小到大）
if (arr[j] > arr[j + 1]) {
// 交换 arr[j] 和 arr[j+1] 的值
// 交换后，arr[j] 就排在了后面，所以后面的数字要向前移动一位
// 使用交换的方法，可以让每次循环都把最大的数字放在最后
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
11.触发怪异盒模型：
box-sizing:border-box;
怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。
box-sizing:
属性值：
box-sizing:content-box; 常规盒模型
box-sizing:border-box: 怪异盒模型（IE盒模型）