Skip to content
On this page

面试问题

HTML+CSS

你对html标签语义化有什么看法?

写什么东西就用什么标签,比如导航就用nav标签,头部使用header标签,这样做有利于seo

meta中的viewport属性是用来干嘛的?

一般用来控制视口宽度和缩放比例的,它的content属性里可以设置width=device-width, initial-scale=1.0

说说BFC是什么?

BFC就是块级格式化上下文,他是一个页面渲染的标准,控制块级标签是如何渲染的,常用来清除浮动(overflow:hidden)

JavaScript

ES6有哪些新增语法?

新增了let和const声明变量,箭头头函数,Class类,promise,解构赋值,新增Symbol数据类型

Promise 是用来干嘛的?

promise是解决异步编程回调地狱的一种方案,它有三种状态pending(准备状态), resolve(成功),reject(失败),成功时返回resolve,失败返回reject,它还可以通过 .then 和 .catch 来链式调用(说这些就可以了。等面试官问他们怎么用的,说得太多显得啰嗦)

then接收成功的回调,catch接收失败回调,当然then如果传入两个参数的话第二个参数也可以用来接收失败的回调,除了这两个之外还有一个finally它不管成功还是失败都会接收,但finally不是标准的方法

Promise.all() 里面传一个以promise组成的数组,当数组内所有的项都返回true的话才返回true,

Promise.race() 同上用法,只返回第一个执行完的promise结果,不管是成功还是失败,可以用于测试接口响应速度

深拷贝和前拷贝的区别?

在拷贝引用类型的数据时,比如数组和对象,浅拷贝只是拷贝了指针指向的内存地址,而深拷贝则会拷贝数据,如果是浅拷贝的话,改变拷贝下来的新对象的数据,原有的数据也会被改变,因为他们共用一个内存

追问:如何实现深拷贝?

JSON.parse(JSON.stringify(obj))实现,递归实现

追问:说说递归怎么实现?

mmp......

  1. 如何实现数组去重?

    for套for、forEach、Set()

  2. 数组从小到大排列

    直接sort()

    追问:还有其它方法吗?

    冒泡排序、

跨域

说下什么是jsonp?

jsonp是用来实现跨域请求的一种方法,因为script标签是不受跨域影响的,所以它通过动态得创建script标签和src属性,提交callback到服务器,服务器就会根据callback响应对应的数据

追问:jsonp和ajax相比有什么优缺点?

jsonp不会受到同源策略的影响。可以实现跨域,但只支持get请求,

Vue

computed和watch有什么区别?

computed是计算属性,也就是计算值,它更多用于计算值的场景 computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时重新调用对应的getter来计算 computed适用于计算比较消耗性能的计算场景

watch更多的是[观察]的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作 无缓存性,页面重新渲染时值不变化也会执行

计算属性中的setter怎么用

计算属性默认只有 getter,不过在需要时你也可以提供一个 setter:

js
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstNamevm.lastName 也会相应地被更新。

监听属性的高级用法

一般的watch方法是当改变值时候,才会触发监听事件,但是我们想刚进入页面时候,就触发监听事件,就要用handler()方法

  • handler():当页面刚进入时,自动绑定watch事件,不需要进行触发
csharp
watch: {// 页面加载时,就自动触发此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    }
  }
}
  • immediate属性:布尔值 immediate:true:首次加载就监听数据变化 immediate:false:只有发生改变才监听
csharp
watch: {// 页面加载时,就自动触发此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    },
     immediate: true 
  }
}
  • deep:true;是开启深层次的监听,即所有属性都加上监听器,如果其中一个发生改变了就执行handler函数。
csharp
watch: {// 页面加载时,就自动触发此事件
  nameValue:{
    handler(new){
       this.checkName(value);
       this.tip = "正在验证......";
    },
     immediate: true,
     deep:true
  }
}

什么是MVC和MVVM?

MVC是视图层操作会向请求服务器路由,路由通过对应的控制器获取数据再返回给视图层渲染

MVVM:视图和数据都是通过vm实现数据双向绑定,用户不需要手动去操作dom,只需操作数据,视图也会随之改变

响应式原理?

通过Object.defineProperty来实现数据劫持,用getter方法检测用户获取数据,setter方法触发页面更新

$router和$route的区别

router是全局的路由对象(VueRouter),可以通过this.$router.push 实现页面跳转;

route是跳转的路由对象,可以从里面获取name,path,params,query

vue3与vue2的区别

  • Option APIComposition API

    vue2使用的是Option API ,它的确能实现代码的低耦合,但是当功能越多的时候,每一个功能的代码段是分离的,不能做到高耦合。而Vue3使用的 Composition API 刚好可以解决这个问题,它的每一个功能模块的逻辑都可以单独地写到一个模块中然后引人到setup中,这样我们就可以自己做一些程序上的设计

  • Object.definePropertyProxy

    Object.defineProperty不能直接处理数组,而Proxy是可以的

inject与 provide

inject与 provide主要是用来解决跨组件之间的通信

组件中的data为什么要是一个函数?

如果data是一个对象时,当组件被多次复用,则他们是共用一个data,所以需要写成函数返回一个对象的形式,使每个组件都有自己的data(类似于闭包的原理)

Webpack

webpack打包原理

webpack打包后其实是一个自执行函数,他传入一个对象参数,对象的键为打包文件的路径,值为一个函数(这个函数内就是执行当前文件的代码)。打包后的文件内部有一个__webpack_require__方法一直不断调用自己也就是递归的形式实现把不同的文件打包成一个文件的。

webpack打包优化

  • 自带优化:

    tree-sharking 把没用的代码删除掉 (只在生产环境有效)

    scope-hoisting作用域提升 (变量如果能直接拿到运算结果就不会被打包)

  • 自定义优化

    happypack多线程打包(缺点:体积比较小时打包慢)

    IgnorePlugn把不需要的包删掉

    externals不打包

    动态链接库 分包,可以打包到不同文件内把一些大文件放到cdn

    抽离公共代码块

其它问题

  1. 你第一家家公司离职的原因是什么?

    项目技术栈比较老,新项目对我自己没有提升,提议过用新技术栈开发项目,不过公司呢可能是属于那种比较保守,并没有采取我的建议。我觉得在互联网飞速发展的时代,技术这东西不进则退,对于那时候刚入行的我来说是希望在工作当中能学到更多东西,并且能让自己的技术有提升。所以我才会选择离职,这可能也是我个人的原因吧。

  2. 你上家离职的原因是什么?

    我上家公司主要是做外包的,项目类型各种的都有,确实能短时间提升自己的业务水平。但是公司的晋升机制不完善,这让我感觉到没有发展的前景所以我选择去考虑其它的机会。

  3. 你还有什么想问的吗?

    • 公司的团队协作的方式是什么?

    • 您在公司的团队合作中,有什么需要解决的现有问题吗?

    • 您希望与什么类型的人协作?

    • 贵司的岗位体质划分是怎么划分的

    • 薪资架构是怎么架构的

    • 晋升空间是怎么晋升的

    • 技术栈主要用的是什么

    • 贵司有没有五险一金

    • 贵司的团队规模有多大

    • 试用期多久

    • 试用期薪资给出的薪资架构是怎么样的