大家好，欢迎来到IT知识分享网。

1.垂直水平居中

已知高度和宽度的元素：

设置父元素为相对定位relative，给子元素设置绝对定位absoluted，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: –元素宽度的一半px; margin-top: –元素高度的一半px;

未知高度和宽度的元素：

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translate(-50%，-50%);

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform:translate(-50%，-50%);

2.data为什么是个函数

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

3.vue的特性

• 轻量级的框架
• 双向数据绑定
• 指令
• 组件化
• 客户端路由
• 状态管理

4.for of for in forEach的区别

for of：

支持return，并且是值of数组（不能遍历对象）
1. 可以避免所有 for-in 循环的陷阱
2. 不同于 forEach()，可以使用 break, continue 和 return
3. for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4. 它也支持字符串的遍历
5. for-of 并不适用于处理原有的原生对象

for in：

1. key会变成字符串(String)类型。
2. 包括数组的私有属性也可以打印出来，即循环不仅会遍历数组元素，还会遍历任意其他自定义添加的属性，如，arr上面包含自定义属性，arr.b，那这次循环中也会出现此b属性。
3. 某些情况下，上述代码会以随机顺序循环数组

forEach：

forEach是声明式，没办法使用 break 语句跳出循环，或者使用return从函数体内返回。

5.es6中 let const var 的区别

• Var 声明的变量会挂载在 window 上，而 let 和 const 声明的变量不会
• Var 声明的变量存在变量提升，let 和 const 不存在变量提升
• 同一作用域下 var 可以声明同名变量，let 和 const、不可以
• Let 和 const 声明会形成块级作用域
• Let 暂存死区
• Const 一旦声明必须赋值，不能用 null 占位，声明后不能再修改，如果
• 声明的是复合类型数据，可以修改属性

6.建立vue-cli的src都放什么

assets文件夹里是静态资源；components是放组件；router是定义路由相关的配置；view视图；app.vue是一个应用主组件；main.js是入口文件

7.keep-alive

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

生命周期函数：activated（组件激活时调用）、deactivated（组件停用时调用）

8.vue组件中的通信

• props / $emit
• localStorage / sessionStorage
• Vuex
• $children / $parent
• provide/ inject
• ref/ refs
• eventBus
• $attrs与 $listeners

常见的使用场景可以分为三类:

1. 父子组件通信: props/ $emit; $parent / $children; provide / inject ; ref ; $attrs / $listeners
2. 兄弟组件通信: eventBus ; vuex
3. 跨级通信: eventBus；Vuex；provide / inject 、$attrs / $listeners

9.promise reject和catch的区别

• reject 是 Promise 的方法,而 catch 是 Promise 实例的方法”
• reject 是用来抛出异常，catch 是用来处理异常的
• reject 是 Promise 的方法，而 catch 是 Promise 实例的方法
• reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
• 网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

10.px em 区别

• Px，绝对长度单位，像素 px 是相对于显示器屏幕分辨率来说的
• em 相对长度单位，相对于当前对象内文本的字体尺寸
• em 的值并不是固定的
• em 会继承父级元素的字体大小（参考物是父元素的 font-size）
• em 中所有的字体都是相对于父元素的大小决定的
• rem 相对于 html 根元素的 font-size
• 1em=1rem=16px 在 body 中加入 font-size：62.5% 这样直接就是原来的 px 数值除以 10 加上 em 就可以

11.v-if 和v-show的 区别

• v-show：是否显示，元素肯定已经渲染到 dom 节点上了，然后通过样式来控制是否显示。
• v-if：控制是否有dom元素，
• v-if 优点：一次渲染多个 体积小；v-show全部都要加载，体积大

当频繁执行条件时，不适合使用 v-if ,用 v-show ;
反之执行条件的次数很少，使用 v-if 即可。

12.v-for和v-if一起使用的时候，谁会先执行

v-if 和 v-for ,不推荐两者一起使用在同一个元素上，虽然也能运行，但是编辑器会报警告；两者一起使用时，v-for比v-if具有更高的优先级，