面试小结

1.rem的计算原理

打个比方，要计算375px的屏幕，设计稿给的是750px的，此时屏幕1px相当于设计稿的0.5px，所以设计稿上某个元素类imgTest100px，相当于屏幕上50px

设置html 下font-size 默认值为 0.5px，为了计算方便一般会以100倍计算，也就是50px，如下，即1rem = 50px：

@media screen and (min-width:375px) {
    html {
        font-size: 50px;
    }
}

.imgTest{  width: 50px  }

2.垂直居中，水平居中css

设置盒子绝对定位absolute，然后top,right，bottom,left都为0，margin: auto;

3.v-for循环的key的设置

使用对象的id，有易于性能

4.css实现图像旋转的效果

1）设置图片对象无限循环

img{ display:block; annimation: rotate 6s infinite;  }

2) 关键帧动画

@keyframe rotate{

0%{ transform: rotateZ(0deg) }

100%{ transform: rotateZ(360deg) }

}

 

5.Vue父子组件之间的传值(父子组件关系可以总结为props向下传递，事件向上传递)

1) 父组件向子组件传值

父组件：

子组件：

export default{

    props{

      title:{

        type: string,

        default:'Hellow World'

      }

    }

}

2）子组件向父组件传值

父组件：

子组件：

 

6.Vuex的五个核心概念

state:  vuex的基本数据

getter：从基本数据（state）派生的数据

mutation：提交更改数据的方法，同步

action：包裹mutation，使之可以异步

modules：模块化vuex

 

7.Vue的computed和watch的区别

computed
1、computed是计算属性，也就是依赖某个值或者props通过计算得来得数据；
2、 computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化，会重新调用getter来计算；
3、 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；

watch
1、watch是监听器，可以监听某一个数据，然后执行相应的操作；
2、不支持缓存，数据变直接会触发相应的操作；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4、支持异步操作；

8.dispatch和commit的区别：

dispatch：含有异步操作

存储：

this.$store.dispatch('initUserInfo',friend);

取值：

this.$store.getters.userInfo;

commit：同步操作

存储：

this.$store.commit('initUserInfo',friend);

取值：

this.$store.state.userInfo;

9.函数的防抖和节流

防抖：对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次

在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：

• 如果在200ms内没有再次触发滚动事件，那么就执行函数
• 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，只会执行一次函数。

 

10.第一次页面加载会触发哪几个钩子

beforeCreate, created, beforeMount, mounted

 

11.深度拷贝与浅度拷贝的区别

主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的操作不会影响原始对象。

所以深度拷贝是不会改变拷贝对象的值，

而浅度拷贝是会改变拷贝对象的值

12.Vue设置缓存

VUE.JS 使用缓存我建议用 good-storage ，good-storage 是一个插件，需要安装

localStorage 临时缓存（主动清除缓存才会销毁）

sessionStorage 长期缓存（关闭浏览器自动销毁）

13.forEach和map的区别

forEach没有返回，

map可以有返回，可以return

14.数组常用的一些方法

unshift：从第一位添加元素

shift: 删除数组第一项

push: 数组末尾添加内容

pop: 删除最后一项

slice：按照条件查找出其中内容部分

splice:  对数组进行增删改

join: 用指定的分隔符将数组拼成一个字符串

concat: 连接两个或多个数组

indexOf：检测在数组中第一次出现的索引

lastIndexOf: 检测在数组中最后一次出现的索引

includes: 判断数组是是否包含数组

trim:  去掉字符串首尾空格

 

15.ref的作用

获取实例对象

16.vue组件通信

   1）父子通信

        父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners

   2)  兄弟通信

        Bus；Vuex

   3）跨级通信

         Bus；Vuex；provide / inject API、$attrs/$listeners

17.css吸附定位

position: sticky

18.css垂直居中

水平居中：margin: 0 auto;

垂直居中：

    
Content here


#parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}

19.浏览器跨域请求的方式：

CORS

JSONP

Nginx反向代理

20.MVVM的认识

M: Modul(逻辑操作)

V: View（页面）

VM: ViewModel（Modul和View之间的枢纽，比如Vue.js）

1) Model与ViewModel之间的双向关系
   Model通过Ajax通信，发送数据给ViewModel。
   ViewModel也可以通过Ajax通信，发送请求给Model

2) ViewModel与View之间的双向关系
  ViewModel中的数据改变，可以同时改变View上的显示内容。
  View上的内容改变(比如输入框中的内容)，也可以同时改变ViewModel中对应的数据

21.执行上下文

JS执行上下文：JS执行前，JS引擎做的准备工作，这份工作就是创建对应的上下文

主要分为三类：全局执行上下文，函数上下文，eval上下文（一般不使用）

22. IE,Chrome,FireFox的内核分别是

IE:  Trident

Chrome: webkit

FireFox: Gecko

23. 数组去重

[...new Set(arr)]

24.SEO的方式和原理

方式：

1）网站结构布局优化：尽量简单，开门见山，提倡扁平结构

     控制首页链接数量；

     扁平化目录层次；

     导航优化（img必须添加alt和title的属性）；

     网站的结构布局（页面头部：logo及主导航，页面主体：左边正文，右边放热门文章及相应文章，页面底部：版权信息和友情链接）；

     控制页面的大小，减少http的请求，提高网站的加载速度

2）网页代码优化