2020年面试题解析

183 阅读5分钟

1.自我介绍。

自己的基本信息,加上自己所用的技术栈清晰的解释给面试官。

2. vue-router如何实现懒加载。

  1. vue异步组件
  2. es6的import()
  3. webpack的require.ensure()

实现方法:

一、Vue异步组件技术:
	{
		path: '/home',
		name: 'Home',
		component: resolve => reqire(['path路径'], resolve)
	}
二、es6的import()
	const Home = () => import('path路径')
三、webpack提供的require.ensure()
	{
		path: '/home',
		name: 'Home',
		component: r => require.ensure([],() =>  r(require('path路径')), 'demo')
	}

**

3.什么是路由的懒加载。

路由懒加载是通过异步的方式来加载对应的路由组件,提高页面相应速度。

4.介绍一下你在vue里面接触的钩子。(根据个人列举)

beforeCreate(实例创建前)

实例组件刚开始创建,元素dom和数据都还没有初始化
   应用场景:可以在这加个loading事件

created(实例创建后)

数据data已经初始化完成,方法也已经可以调用,但是dom为渲染,在这个周期里面如果进行请求是可以改       变数据并渲染,由于dom未挂载,请求过多或者占用时间过长会导致页面线上空白
     应用场景:在这结束loading,还做一些初始化,实现函数自执行

beforeMount(元素挂载前)

dom未完成挂载,数据初始化完成,但是数据的双向绑定还是{{}},这是因为vue采用了虚拟dom技术。

mounted(元素挂载后)

数据和dom都完成挂载,在上一个周期占位的数据把值渲染进去,一般请求会放在这个地方,因为这边请求       改变数据之后刚好能渲染。

beforeUpdate(实例更新前)

只要是页面数据改变了都会触发,数据更新之前,页面数据还是原来的数据,当你请求赋值一个数据的时候就会执行这个周期,如果没有数据改变不执行。

updated(实例更新后)

只要是页面数据改变了都会触发,数据更新完毕,页面的数据是更新完成的,beforeUpdated和updated要谨慎使用,因为页面更新数据的时候都会触发,在这里操作数据很影响性能和死循环。

beforeDestory(实例销毁前)

实例销毁之前调用,在这一步,实例仍然完全可用。

destoryed(实例销毁后)

vue实例销毁后调用,调用后,vue实例指示的所有内容都会解除绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁。

5.vue的生命周期过程。(如图必须要知道)

6.什么是钩子。(是问什么是钩子函数)

钩子函数是事件被动的监听,一旦条件触发就执行。

7.预编辑处理用过哪些?

Less、 Sass、 Stylus。
  说下三者区别:

  1. 基本语法区别
    Sass是以.sass为扩展名,Less是以.less为扩展名,Stylus是以.styl为扩展名

2.  变量的区别
     Sass 变量必须是以开头的,然后变量和值之间使用冒号(:)隔开,和css属性是一样的。<br />
     Less 变量是以@开头的,其余sass都是一样的。<br />    Stylus 对变量是没有任何设定的,可以是以开头或者任意字符,而且变量之间可以冒号,空格隔开,但是在            stylus中不能用@开头

  1. 三种预处理器都有:嵌套、运算符、颜色函数、导入、继承、混入。Stylus还有一些高级特性。例如循环、判断等

8.less如何定义变量?

less用@定义变量,sass用$定义变量。Stylus的变量通过 = 进行定义。

//1.Sass 的变量以 $ 开头,赋值方法与 CSS 属性的写法一致
//$var-name: var-value;
//2.Less 的变量是以 @ 开头,语法格式类似于 CSS 的 Property 的书写格式,与 Sass/Scss 有一些类似
//@var-name: var-value;
//3.Stylus的变量通过 = 进行定义,就像是普通的编程的变量一般,不需要什么特殊的前缀
var-name = var-value

9.大概说下闭包?

由于在js中,变量到的作用域属于函数作用域,在函数执行后作用域会被清除、内存也会随之被回收,但是由于闭包是建立在一个函数内部的子函数,由于其可访问上级作用域的原因,即使上级函数执行完,作用域也不会随之销毁,这时的子函数---也就是闭包,便拥有了访问上级作用域中的变量权限,即使上级函数执行完后,作用域内的值也不会被销毁。
闭包解决了什么:在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
由于闭包可以缓存上级作用域,那么就使得函数外部打破了“函数作用域”的束缚,可以访问函数内部的变量。以平时使用的Ajax成功回调为例,这里其实就是个闭包,由于上述的特性,回调就拥有了整个上级作用域的访问和操作能力,提高了几大的便利。开发者不用去写钩子函数来操作审计函数作用域内部的变量了。

10.实现一个简单的闭包?

function fn1() {
  var a = 1,
        b = 2;
  return function() {
       return a
  }    
}
var fn2 = fn1();
fn2();    // 1

11.闭包有什么不足?

由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

12.列举数组的方法?(参考w3school)

image.png

image.png

13.axios实例化配置过哪些属性?

url是用于请求的服务器URL

method是创建请求时使用的方法,默认是get

baseURL将自动加在url前面,除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URL

transformRequest允许在向服务器发送前,修改请求数据,只能用在'PUT','POST'和'PATCH'这几个请求方法

headers是即将被发送的自定义请求头