2021-01-10

面试题

1、什么是rem布局，如何配置rem？

通过js方法动态设置rem，改变根元素font-size来实现兼容性更高的页面

function rem(){
document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";
}   
rem();
window.onresize=rem;

2、实现响应式布局的方法都有哪些？

百分比布局，媒体查询(CSS3 @media 查询),rem布局，Vw视口单位，Flex布局

3、js数据类型都有哪些？ 如何判断这些数据类型， 这些方法的区别是什么？

1、typeof（函数，返回基本数据类型） 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用的
基本数据类型：number，string，boolean，null、undefined、symbol
引用数据类型（对象类型）Object、array、function等
2、instanceof 判断 new 关键字创建的引用数据类型,可以区分数组和对象
　　　不考虑 null 和 undefined以对象字面量创建的基本数据类型
3、constructor 似乎可以完全应对基本数据类型和引用数据类型 但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，这种情况下，constructor 也显得力不从心
4、object.prototype.toString.call()
判断属于哪种内置对象时，不能判断自定义类型
原理：由于实例对象会自定义toSting方法，覆盖掉object.prototype.toString方法，为了得到类型的字符串，直接使用object.prototype.toString方法。通过call函数，直接调用这个方法，帮助判断类型。
实现：返回对象的类型字符串，因此能判断一个值的类型

4、简述什么是原型链？

当一个对象调用自身不存在的方法或属性时，就会去proto中的prototype下寻找，如果没有找到，就回去上一级的proto中的prototype下寻找，以此类推，直至找到或undefined为止

5、什么是闭包，他有什么优缺点？

概念：函数套函数，内部函数可以访问外部函数的值，并在外部执行，就产生了闭包
特性：函数套函数，内部函数能够访问外部函数的变量以及参数，变量不会被垃圾回收机制回收（引用计数，标记清除）
优点：变量一直在内存中，避免全局变量污染（防止内存泄露），私有成员的存在
缺点：不能及时释放内存，捕获的变量是引用，不是复制，父函数每调用一次，就产生一次闭包

6、js实现继承的方法有哪些？

原型链继承，借用构造函数继承，组合继承(组合原型链继承和借用构造函数继承)，
原型式继承，寄生式继承，寄生组合式继承

7、什么是深拷贝？

概念：也可以说成深克隆、深复制
就是拷贝多层，层层拷贝，他是将对象和值复制过来，深拷贝后的对象与原来的对象是完全隔离的，互不影响，而且修改任何一个不会改变另一个。

8、什么是事件流？

事件流所描述的是从页面中接收事件的顺序
事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段

9、什么是事件冒泡？

事件冒泡： 当事件发生时，事件的流向从最内层子元素依次冒泡到最外层根元素
　　　阻止事件冒泡：stop propagation

10、什么是事件捕获？

事件捕获： 当事件发生时，事件的流向从最外层根元素依次捕获到最内层的子元素
　　　　　　阻止默认事件：preventdefault

11、h5和css3新增特性有哪些？

H5特性
1.语义化标签：header、footer、section 、article
2.增强表单：input的多个type
3.新增表单元素：datalist、keygen 、output
4.新增表单属性：placeholder、required 、min和max
5.音视视频：audio、video
6.Canvas地理定位
7.拖拽
8.本地存储：localStorage 没有时间限制保存 ，sessionStorage 针对一个数据 保存，浏览器关闭后，会自动删除
9.新事件：onresize、ondrag 、onscroll、onmounsewheel、onerror 、 onplay、onpause
10.webScochet：单个TCP连接进行双通讯协议
css3特性

1. 选择器
2. 背景和边框
3. 盒子阴影、透明度
4. 转换
5. 动画、过渡
6. 布局
7. 媒体查询

12、axios拦截分为哪些？ 有几个拦截点？

axios分为请求拦截和响应拦截
　　　请求拦截：在请求前触发，只要发送请求就触发
　　　响应拦截：在接收后进行下部操作
　　　请求成功失败2个，响应成功和失败2个

13、js数据存储的方法有哪些？有什么区别？

Localstorage,sessStorage,cookie
　　　区别:

​ localStorage:是永久的，一直有效，浏览器关闭后也会保存， 数据大小在5MB，不参与通信，可以共享。

​ sessionStorage：只在当前有效，关闭后会清除，数据大小 在5MB，不参与通信。

​ cookie：数据存在客户端中，单个保存不多于4K；只适合存放小数 据，具有扩展、可用性

14、如何实现图片懒加载？

img里面有个src属性，当src没有被赋值的时候，是不会显示任何内容的，当用户跳转到想看的页面，才会加载，如果没有跳转到想看的页面就不用加载

15、如何事件瀑布流？

瀑布流，又称瀑布流式布局。通过比较每一列高度，随着页面滚动条向下滚动，他会找到每一列中最低的那一栏，按从低到高的顺序依次添加。

16、什么是解构赋值？写一个对象解构赋值的例子

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

17、let、const、 var的区别是什么？

（1）var声明变量存在变量提升，let和const不存在变量提升

（2）Let，const都是块级局部变量，只在当前代码块起作用

（3）同一作用域下let和const不能声明同名变量，而var可以

18、es6中keys的作用是什么？

（1）传入对象，返回的是属性名

（2）传入字符串和数组，返回的是索引

（3）输入构造函数，返回的是空数组或属性名

19、什么是模块化？导入和导出的方法是什么？

模块化就是将独立的一个功能封装到一个模块（文件）中，模块和模块之间是相互独立、相互隔离

//方法一   全部导出导入
//导出
const a =1;
const b =2;
export default {
    a,b
}
//导入
import a from "./a"

//方法二   单个导出导入
//导出
export const a = 1;
export const b = 2;
export const c = function(){
	return 1000
}
//导入（如果是单独导出的话，导入的时候变量需要使用{ }解构出来）
import {a ,b,c} from "./a"

20、 什么是async函数

async 函数就是 Generator 函数的语法糖。

21、什么是promise？promise实现的原理是什么？ 如何使用promise？

promise是一种解决异步的方案，主要用于异步操作

**原理：**promise分为三个状态，pending初始状态，fulfilled成功状态， rejected失败状态

​ promise接收一个回调函数作为参数，该函数中接收两个参数作为参数，一个是resolve（将promise转化为成功状态的回调函数），一个是reject（将promise转化为失败的回调函数）

22、for…in和for…of的区别是什么？

For (map filter)有返回值 foreach

在循环对象时用for··in，遍历数组时用for···of

for···in循环的结果时key值，for···of是value

for···of不能循环普通对象，需要搭配Object.keys使用

注意：for··of是ES6新特性，修复了for··in不足

23、 ajax的基本步骤是什么？

主要用来异步通信，在不加载页面情况下，局部更新

//创建对象 
var xhr=new HttpRequest( )

//初始化请求
xhr.open(type,url,true);

//设置头信息 
xhr.setRequestHeader(",")

//发送请求 
xhr.send()

//回调函数 
xhr.onreadystatechange=function(){
    if(xhr.readystate===4&&xhr.status===200){
        Var data=xhr.responseText
    }
}

24、ajax的优缺点都有哪些？

优点：减轻服务器的负担,减少请求，局部刷新页面,减少用户的等待时间,提 高用户体验，基于xml标准化,被广泛支持,进一步促进页面和数据的 分离

缺点：对浏览器后退机制的破坏，对搜索引擎的支持比较弱，破坏了程序的 异常机制，AJAX的安全问题

25、实现跨域的方法都有哪些？

jsonp

动态创建

代理（前端代理和后端通常通过 nginx 实现反向代理）

前端代理我在vue 中主要是通过vue 脚手架中的config 中的index 文件来配置的，其中有个 proxyTable 来配置跨域的3

CORS

全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的

vue.config.js

在项目根目录下创建一个文件vue.config.js，在配置文件中写：

module.exports = {
  devServer: {
      proxy: {
          'http://122.51.238.153'
      }
  }
}

proxy实现跨域的原理：

首先浏览器是禁止跨域的，但是服务端不禁止，在本地运行 npm run dev 等命令时实际上是用 node 运行了一个服务器，因此 proxyTable 实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理。

26、简述输入url到页面显示都有哪些步骤？

1. DNS 解析
2. TCP 连接
3. 发送 HTTP 请求
4. 服务器处理请求并返回需要的数据
5. 浏览器解析渲染页面
6. 连接结束

27、简述什么是三次握手、四次挥手？

三次握手：

1. 第一次握手：客户端向服务端发送连接请求
2. 第二次握手：服务端收到请求，如果同意连接，则发送响应
3. 第三次握手：当客户端收到连接同意后，向服务端发送确认，表示已经成功收到。

**四次挥手：**目的是终止数据传输，并回收资源

1. 第一次挥手：若客户端认为数据发送完成，向服务端发送连接释放请求
2. 第二次挥手：服务端收到请求后，通知相应程序，说明已经释放。
3. 第三次挥手：当服务端向客户端发完所有数据后，向客户端发送连接释放请求。
4. 第四次挥手：客户端收到释放请求后，向服务端发送确认应答。

28、常见的错误码都有哪些？ 分别表示什么意思？

200：响应成功

403：拒绝访问

404：资源找不到

304：资源已经缓存过，不需要重复加载

500：服务器错误

29、Vue 中 methods,computed, watch 的区别？

computed 计算结果会缓存，如果依赖值发生改变，就会重新调整计算结果

methods 事件方法 执行一次，调用一次，不会缓存

watch 监听属性 一个值得变化需要另一个值变化而变化

30、vue 双向数据绑定原理？

Vue 实现 双向数据绑定 主要采用：数据劫持结合“发布-订阅”模式的方式，通过Object.defineProperty（）的 set 和 get，在数据变动时发布消息给订阅者触发监听。

31、vue父组件向子组件传值的方法是什么？

在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值

在子组件通过props:[“自定义属性名”]来接收数据

32、vue子组件向父组件传值的方法是什么？

在父组件中给子组件上绑定一个自定义事件方法，给这个事件挂载需要调用的方法，在子组件中通过this.$emit(“自定义事件名”)来调用这个方法

33、vue非父子组件传值的方法是什么？

· 创建一个空的vue实例eventBUS

· 通过BUS.$emit(“事件名”)传到空的vue实例中

· 通过BUS.$on(“事件名”,(参数)=>{挂载传来的数据})来接收

34、什么是vuex？vuex有哪些方法，分别是干什么的？

vuex是vue的状态管理工具，用来存放公共数据的仓库

1、state ，存放状态，用于定义共享的数据。

2、action ，向store发出调用通知，执行异步操作

3、mutations ，它只用于修改state中定义的状态变量。

4、getter，是store的计算属性

5.modules，对state进行分类处理

6.plungins，持久化插件，保证页面刷新时数据不会丢失

35、vue生命周期有哪些？ 分别表示什么意思

beforeCreate：实例创建之前 => created：实例创建之后

beforeMount：组件挂载之前 => mounted：组件挂载之后

beforeUpdate：数据改变视图更新之前 => updated：试图更新之后

beforeDestroy :实例销毁之前 => destroyed：实例销毁之后

activated 被 keep-alive 缓存的组件激活时调用

deactivated 被 keep-alive 缓存的组件停用时调用。

errorCaptured新增当捕获一个来自子孙组件的错误时被调用

36、vue路由传参的方法有哪些？ 有什么区别？

query传参

this.$router.push({path:"/home",query:{id:12}})

接收：this.$route.query.id

params传参

this.$router.push({name:“home”,params:{id:12}})

接收：this.$route.parmas.id

Params和query的区别：

(1) query可以使用name和path而params只能使用name

(2) 使用params传参刷新后不会保存，而query传参刷新后可以保存

(3) Params在地址栏中不会显示，query会显示

(4) Params可以和动态路由一起使用，query不可以

37、vue路由守卫有几种，分别是什么？ 分别在什么时候触发？

一：全局路由守卫

router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发

router.beforeResolve()

二：组件级路由守卫

放在要守卫的组件里，跟data和methods同级

beforeRouteEnter(){}完成前

beforeRouteUpdate(){}更新前

beforeRouteLeave(){}离开前

三：单个路由规则独享的守卫

写在路由配置中，只有访问到这个路径，才能触发钩子函数

beforeEnter(){}

携带参数：

to(路由对象)即将要进入的目标

from 当前导航要离开的路由

next方法 resolve 钩子函数 代表执行下一步

38、vue中key的作用是什么？

是一个唯一标识符，用于区分相同的元素，如果现在有两个input 框，用的是一个数据，可能第一个input框输入的内容会带到第二个里 面，所以用key值来区分

key具有唯一性，用于管理可复用的元素，为了在diff算法执行时更快 的找到对应的节点，提高diff速度，2.2.0+ 的版本里,当在组件中使用 v-for 时,key 是必须的

40、vue自定义指令的语义是什么？写一个例子

directives:{
    "指令名":{
        inserted:function(当前节点){
            //对节点操作
        }
    }
}
//例：
directives:{
    color:{
        bind:function(el,binding){
            if(binding.arg){
                el.style.color=binding.arg
            }else{
                el.style.color="green"
            }
        }
    }
}

41、vue自定义指令的钩子函数都有哪些？ 分别表示什么意思？

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

(1) bind：只调用一次，指令第一次绑定到元素时调用

(2) inserted：被绑定元素插入父节点时调用

(3) update：所在组件的虚拟节点更新时调用

(4) componentUpdated：所在组件的虚拟节点及子虚拟节点全部更新后调用

(5) unbind：只调用一次，指令与元素解绑时调用

42、vue绑定事件的方法是什么？ 都有哪些修饰符？ 分别表示什么意思？

v-on：自定义事件名=”方法名”

修饰符：

@事件.stop 阻止事件冒泡

@事件.prevent 阻止事件默认行为

@事件.capture 触发事件捕获

@事件.self 当事件在该元素本身 触发回调

@once 只执行一次

43、keep-alive的作用是什么？

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，它自身不会渲染一个DOM元素，也不会出现在父组件中，作为标签使用，包裹在需要缓存的组件外

44、object.defineProperty()方法如何使用？

参数说明：

1. obj：目标对象，需要操作的对象
2. prop：需定义或修改的属性名
3. descriptor：需要修改的值

**返回值：**返回操作的对象，返回obj参数

用途：有两种内置方法，get和set函数实现双向数据绑定，广泛用于vue响应式原理和实现双向数据绑定

45、简述什么是虚拟dom？

虚拟dom 是根据模板生成一个js对象（使用createElement方法），根据这个js对象再去生成真实的dom，对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作

46、简述什么是diff算法

diff算法 当data发生改变 会根据新的数据生成一个新的虚拟dom ，新的虚拟dom和旧的虚拟dom进行对比，这个对比的过程就是diff算法，会找到不同地方，只去渲染不同的地方

47、vue如何强制更新视图？

方案一：

利用this.set(this.obj,key,val)
$set 是给对象添加属性
例：
this.set(this.obj,“k1”,“v1”)

方案二：

利用Object.assgin({},this.obj)创建新对象

如果是数组就Object.assgin([],this.obj)
如果是对象就Object.assgin({},this.oj)

48、vue3.0 与 vue2.0 的区别

1、默认进行懒观察

在2.0中，不管数据多大，都会成为观察者，当数据大时，会造成性能压力。3.0会对可见部分的数据，而3.0更高效

2、更精准的变更通知

2.0中，使用Vue.set新增属性时，所有的都会重新运行。3.0中，只有依赖的才会重新运行

3、3.0新加入了TypeScript以及PWA的支持

4、部分命令发生了变化

（1）下载安装npm install -g vue/cli

（2）删除了vue list

（3）创建项目 vue create 项目名

（4）启动项目 npm run serve

5、默认项目目录结构页发生变化：

1.移除了配置文件目录，config和build文件夹
2.移除了static文件夹，新增pubilc文件夹，并且index.html移到public中
3.在src文件夹中新增了views文件夹，用于分类视图组件和公共组件

6、性能提升

7、API变动

8、重写虚拟DOM