挑战一轮大厂后的面试总结 (含六个方向) - 框架(vue)和工程相关

6,082 阅读14分钟

在去年底开始换工作,直到现在算是告了一个段落,断断续续的也面试了不少公司,现在回想起来,那段时间经历了被面试官手撕,被笔试题狂怼,悲伤的时候差点留下没技术的泪水。

这篇文章我打算把我找工作遇到的各种面试题(每次面试完我都会总结)和我自己复习遇到比较有意思的题目,做一份汇总,年后是跳槽高峰期,也许能帮到一些小伙伴。

先说下这些题目难度,大部分都是基础题,因为这段经历给我的感觉就是,不管你面试的是高级还是初级,基础的知识一定会问到,甚至会有一定的深度,所以基础还是非常重要的。

我将根据类型分为几篇文章来写:

面试总结:javascript 面试点汇总(万字长文)(已完成) 强烈大家看看这篇,面试中 js 是大头

面试总结:nodejs 面试点汇总(已完成)

面试总结:浏览器相关 面试点汇总(已完成)

面试总结:css 面试点汇总(已完成)

面试总结:框架 vue 和工程相关的面试点汇总(已完成)

面试总结:非技术问题汇总(已完成)

我会抓紧时间把未完成的总结补全的~

这篇文章是对 框架 vue 和工程相关 相关的题目做总结,欢迎朋友们先收藏在看。

先看看目录

目录

VUE

这部分是 vue 相关的整理。

响应式原理

响应式原理是 vue 的核心思想之一,后续打算单独整理一篇,这里简单介绍响应式的三大件

Observer

观察者,使用 Object.defineProperty 方法对对象的每一个子属性进行数据劫持/监听,在 get 方法中进行依赖收集,添加订阅者 watcher 到订阅中心。 在 set 方法中,对新的值进行收集,同时订阅中心通知订阅者们。

/*对象的子对象递归进行observe并返回子节点的Observer对象*/
let childOb = observe(val)
Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      /*如果原本对象拥有getter方法则执行*/
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        /*进行依赖收集*/
        dep.depend()
        if (childOb) {
          /*子对象进行依赖收集,其实就是将同一个watcher观察者实例放进了两个depend中,一个是正在本身闭包中的depend,另一个是子元素的depend*/
          childOb.dep.depend()
        }
        if (Array.isArray(value)) {
          /*是数组则需要对每一个成员都进行依赖收集,如果数组的成员还是数组,则递归。*/
          dependArray(value)
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      /*通过getter方法获取当前值,与新值进行比较,一致则不需要执行下面的操作*/
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        /*如果原本对象拥有setter方法则执行setter*/
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      /*新的值需要重新进行observe,保证数据响应式*/
      childOb = observe(newVal)
      /*dep对象通知所有的观察者*/
      dep.notify()
    }
  })

在setter中通知观察者更新,在getter中向Dep(调度中心)添加观察者。

watcher

扮演的角色是订阅者,他的主要作用是为观察属性提供通知函数,当被观察的值发生变化时,会接收到来自订阅中心 dep 的通知,从而触发依赖更新。

核心方法有: get() 获得getter的值并且重新进行依赖收集 addDep(dep: Dep) 添加一个依赖关系到订阅中心 Dep 集合中 update() 提供给订阅中心的通知接口,如果不是同步的(sync),那么会放到队列中,异步执行,在下一个事件循环中执行(采用 Promise、MutationObserver以及setTimeout来异步执行)

Dep

扮演的角色是调度中心,主要的作用就是收集观察者 Watcher 和通知观察者目标更新。 每一个属性都有一个 Dep 对象,用于存放所有订阅了该属性的观察者对象,当数据发生改变时,会遍历观察者列表(dep.subs),通知所有的 watch,让订阅者执行自己的 update 逻辑。

computed 为什么比 watch method 性能要好

从编码上 computed 实现的功能也可以通过普通 method 实现,但与函数相比,计算属性是基于响应式依赖进行缓存的,只有在依赖的数据发生改变是,才重新进行计算,只要依赖项没有发生变化,多次访问都只是从缓存中获取。

计算属性是基于 watcher 实现,看看源码

/*初始化computed*/
// 核心是为每个计算属性创建一个 watcher 对象
function initComputed (vm: Component, computed: Object) {
  const watchers = vm._computedWatchers = Object.create(null)

  for (const key in computed) {
    const userDef = computed[key]
    /*
      计算属性可能是一个function,也有可能设置了get以及set的对象。
    */
    let getter = typeof userDef === 'function' ? userDef : userDef.get
    if (process.env.NODE_ENV !== 'production') {
      /*getter不存在的时候抛出warning并且给getter赋空函数*/
      if (getter === undefined) {
        warn(
          `No getter function has been defined for computed property "${key}".`,
          vm
        )
        getter = noop
      }
    }
    // create internal watcher for the computed property.
    /*
      为每个计算属性创建一个内部的监视器Watcher,保存在vm实例的_computedWatchers中
      这里的computedWatcherOptions参数传递了一个lazy为true,会使得watch实例的dirty为true
    */
    watchers[key] = new Watcher(vm, getter, noop, computedWatcherOptions)

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    /*组件定义的计算属性不能与 data 和 property 重复定义*/
    if (!(key in vm)) {
      /*定义计算属性*/
      defineComputed(vm, key, userDef)
    } else if (process.env.NODE_ENV !== 'production') {
      /*如果计算属性与已定义的data或者props中的名称冲突则发出warning*/
      if (key in vm.$data) {
        warn(`The computed property "${key}" is already defined in data.`, vm)
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(`The computed property "${key}" is already defined as a prop.`, vm)
      }
    }
  }
}

/*创建计算属性的getter*/
function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      /*实际是脏检查,在计算属性中的依赖发生改变的时候dirty会变成true,在get的时候重新计算计算属性的输出值
       *若依赖没发生变化,直接读取 watcher.value
       */
      if (watcher.dirty) {
        watcher.evaluate()
      }
      /*依赖收集*/
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

computed 和 watch 主要区别在于使用场景,计算属性更适用于模板渲染,依赖其他对象值的变化,做重新计算在渲染,监听多个值来改变一个值。而监听属性 watch ,是用于监听某一个值的变化,进行一系列复杂的操作。监听属性可以支持异步,计算属性只能是同步。

vue 对数组的处理

在官方文档上关于数组的注意事项有这么一段

由于 JavaScript 的限制,Vue 不能检测以下数组的变动:

  1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

先看第二点,这是因为 Object.defineProperty 不能监听数组的长度,所以直接修改数组长度是没法被监听到的。

关于第一点,我们看看源码的实现

// vue\src\core\observer\index.js
constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    // 在 Observer 构造函数中,对数组类型进行特殊处理
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }
// observeArray 的实现
/**
 * Observe a list of Array items.
 */
observeArray (items: Array<any>) {
  for (let i = 0, l = items.length; i < l; i++) {
    observe(items[i]) // 对数组的值在进行 observe
  }
}

observeArray 是对数组中的值进行监听,并不是数组下标,所以通过索引来修改值是监听不到了,假如是通过监听索引的话,那是可以实现的。那为啥不监听下标呢?在 vue issue 中好像记得尤大说是性能考虑。

因为是对数组元素做的监听,那么数组 api 造成的修改自然就没法监听到了,所以 vue 对数组的方法进行了变异,包裹了一层,本质还是执行数组的 api

// vue\src\core\observer\array.js
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    // 以下这三个方法,会新增新的对象,所以需要对新增的对象进行监听
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 新对象监听
    if (inserted) ob.observeArray(inserted)
    // notify change 调度中心通知订阅者
    ob.dep.notify()
    return result
  })
})

vue 中 key 的作用

有两点用处:快速节点比对和节点唯一标识

利用快速节点比对

用作于 vnode 的唯一标识,便于更快更准确的在旧节点列表中查找节点

在内部对两个节点进行比较的时候,会优先判断 key 是否一致,如下,如果 key 不一致,立马就可以得出结果

function sameVnode (a, b) {
  return (
    a.key === b.key &&
    a.tag === b.tag &&
    a.isComment === b.isComment &&
    isDef(a.data) === isDef(b.data) &&
    sameInputType(a, b)
  )
}

列表节点唯一标识

列表循环 v-for="i in dataList" 会有提示我们需要加上 key ,因为循环后的 dom 节点的结构没特殊处理的话是相同的, key 的默认值是 undefined ,那么按照上面 sameVnode 的算法,新生成的 Vnode 与 旧的节点的比较结果就是相同的,vue会对这些节点尝试就地修改/复用相同类型元素的,这种模式是高效,但是这种模式会有副作用,比如节点是带有状态的,那么就会出现异常的bug,所以这种不写 key 的默认处理只适用于不依赖其他状态的列表。

注意:在不知道哪个版本,vue 对 for 遍历中未设置 key 的情况,内部做了处理,默认生成一个 key , 所以今后就算不设置 key 也是允许的了。

function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
  const res = []
  let i, c, last
  for (i = 0; i < children.length; i++) {
        // .... 忽略其他代码
        // default key for nested array children (likely generated by v-for)
        if (isDef(c.tag) && isUndef(c.key) && isDef(nestedIndex)) {
          c.key = `__vlist${nestedIndex}_${i}__` // set key 设置默认 key
        }
        res.push(c)
      }
    }
  }
  return res
}

利于节点高效查找

同一层vnode节点是以数组的方式存储,那么如果节点非常多,通过遍历查找就稍微有点慢,因此,内部将 vnode 列表转换成对象,代码如下:

/*
  生成一个key与旧VNode的key对应的哈希表
  比如childre是这样的 [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]  beginIdx = 0   endIdx = 2  
  结果生成{key0: 0, key1: 1, key2: 2}
*/
function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

这样一来,就可以直接通过 key 查找到数组下标,利于加快查找时间。

参考文档: muyiy.cn/question/fr…

虚拟dom 与直接操作 dom 相比哪个更快?

以下是根据尤大在知乎的回答,做的总结:

  1. 首先是没有任何一个框架可以比纯手动优化操作 dom 快,因为框架的 dom 操作层需要应对上层API可能发生的操作,所以它的实现是普适性的,所以不可能对每个场景做优化,这就是个性能和可维护性的取舍。各大框架可以给到即使不需要手动优化,也可以提供较优秀的性能。
  2. 我们看看两者的重绘性能消耗:
  • innerHTML: render html string O(template size) + 重新创建所有 DOM 元素 O(DOM size)
  • Virtual DOM: render Virtual DOM + diff O(template size) + 必要的 DOM 更新 O(DOM change) render Virtual DOM + diff O 显然比渲染 html string 要慢,但我们知道,这是纯 js层面的计算相比, 与 DOM 层面的操作的开销相比要小很多。 所以直接操作dom的开销就和整个页面相关,而虚拟dom的开销就是 js层面的计算和计算后的 dom 的开销,所以虚拟dom就可以保证,不管页面数据变化多少,每次计算后的重绘的性能都在可接受范围内。
  1. 因为机制不一样,那么比较的时候就要看场合,比如是大量数据的更新还是小量数据的更新。举个例子,如果一个非常大的列表,数据全都发生了变化,那么直接操作dom肯定是更快的,那如果只是其中的几行发生了变化,直接全量替换dom的开销可就大了,而虚拟dom在计算后,只需要替换个别dom即可
  2. 虚拟dom提供给开发者的价值不是性能,而是 1.为函数式的UI编程打开大门 2.扩展性强,可以渲染到 DOM 意外的其他平台
  3. 那如果开发中遇到特殊的情况导致虚拟dom的更新效率不满足,那么可以牺牲一定的维护性来自己手动进行优化

参考文档: www.zhihu.com/question/31…

vue 可以定义函数式组件么

函数式组件:没有状态(data),没有生命周期,只接受传递的 props ,常用于纯 UI 组件 定义:

  • 通过 Vue.component 构建组件时,添加 functional: true; 需要通过调用 render 函数来渲染,常用包裹组建或者构建高阶组件
  • 对于单文件组件,在 template 上添加 functional <template functional>

v-model 的实现

常用于输入框的双向数据绑定,但我知道 vue 是单向数据流的,所以 v-model 其实是个封装的指令,本质是对 input 的 @input 事件做了封装,如下代码:

<input @input="change" :obj="obj">
change(e) {
    this.obj = e.target.value;
}

也可以在自定义组件上使用,简化编码,逻辑更加清晰

vue 有几种构建版本

  1. 有生成版本和开发版本的区分;
  2. 完整版和运行时版本的区分,完整版包含编译器(用于生成渲染函数);
  3. 构建环境的区分,支持 UMD(AMD和commonjs)、commonjs、ES Module(用于构建工具的)、ES Module(用于浏览器的)

vuex中为什么把把异步操作封装在action,把同步操作放在mutations?

mutations 同步主要是为了能用 devtools 跟踪状态的变化,每次执行完后,就可以立即得到下一个状态,这样在devtools调试工具中,就可以跟踪到状态的每一次变化,可以做时间旅行 time-travel ,那么如果是异步的话,就没法知道状态什么时候被更新,所以就有了一个 actions 用来专门处理异步函数,但要求状态的需要触发 mutations ,这样一来对于异步的更新也可以清晰看到状态的流转。

参考文档: www.zhihu.com/question/48…

vuex getter方法跟直接 state 中获取有什么区别

getter 类似于计算属性,带有缓存;当只有响应的属性发生变化才会更新缓存,相比直接获取效率更好,在设计上可以便于抽象逻辑。

vue-router 中的 link 跳转和 a 链接跳转的区别

  • 判断是否有 onclick 事件,有就执行
  • 阻止默认事件
  • 使用 history.replace 或 history.push 修改地址栏,同时不触发页面刷新

工具相关

webpack 中的 loader 和 plugin 是干什么的

loader:对文件进行转换,比如说将 ts 编译成 js ,css预处理等等 plugin:通过监听 webpack 运行中的广播事件,从而进行自己的操作,如常用的 HtmlWebpackPlugin:创建html文件、webpack.optimize.UglifyJsPlugin:混淆压缩

webpack 的 externals

防止将外部引用的包打包到 bundle 中,而是在运行时通过模块化的方式从外部引用。 比如我们通过cdn引用 jquery ,我们不希望jq打包到 bundle 中,而且在使用时希望能通过模块化的方式引用,那么可以如下配置

module.exports = {
  //...
  externals: {
    jquery: 'jQuery'
  }
};

接口怎么防刷?

被人通过工具在短时间内恶意大量请求服务端。常用优化方式如下

  • referer 校验 UA 校验
  • 客户端和服务端约定签名算法,由服务端校验签名
  • 服务端对请求 ip 单位时间内请求数量限制
  • 通过前置交互式验证手段,先验证通过在接收请求

什么是前端工程化?

关于工程化,每个人都有自己的理解,以下是我个人的理解,每个点都可以展开很多点来说,这题更多对于工作中的总结

  1. 协作上:
  • 统一开发规范,代码、命名规范,引用语法检查工具
  • 版本管理,提交规范
  1. 项目架构上:
  • 模块化、组件化,沉淀组件库,降低编码间的耦合
  • 团队统一脚手架
  1. 构建:
  • 资源压缩、混淆
  • 图片处理
  1. 持续集成、部署
  • 减少人为参与,Jenkins CI
  • 静态资源分离,cdn、静态文件服务器
  1. 质量跟踪:
  • 持续的单元测试、mocha Istanbul
  • 监控
  1. 用户体验:
  • 性能优化,客户端、服务端、代理服务器的

小结

因为对 react 接触不多,所以基本没问 react 的问题。工具相关的问题都是由某一个知识点引申出来的,好多都想不起来了,这一块还是关乎有没有在工作中有相关的实践。