vue中常问面试题

Posted 2021-06-08 赏花赏景赏时光

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中常问面试题相关的知识，希望对你有一定的参考价值。

一、vue2.x中响应式原理

1）原理

采用数据劫持 + 订阅-发布模式的方式，通过Object.defineProperty来劫各个属性的setter getter，数据变化时，发布消息给订阅者，触发响应的回调。

即在创建Vue实例的时候，会遍历选项data的属性，用Object.defineProperty，为属性添加getter setter 对数据的读取进行劫持，在内部追踪依赖，在属性被访问或修改时，通知变化；如果属性是Object则会循环递归的处理

2）在实现响应式原理中有三大核心实现类

Observer：给对象属性添加getter setter，用于依赖收集、派发更新

Dep：用于收集当前响应式对象的依赖关系。每一个响应式对象及其子对象都有自己的Dep实例（里面的subs是Watcher实例数组），当数据有变更时，会通过dep.notify()通知各个Watcher

Watcher：观察者对象。Watcher实例分为3种：渲染 watcher (render watcher)，计算属性 watcher (computed watcher)，侦听器 watcher（user watcher）

3）Watcher和Dep的关系

watcher 中实例化了 dep 并向 dep.subs 中添加了订阅者,dep 通过 notify 遍历了 dep.subs 通知每个 watcher 更新

4）依赖收集

initState 时,对 computed 属性初始化时,触发 computed watcher 依赖收集
initState 时,对侦听属性初始化时,触发 user watcher 依赖收集
render()的过程,触发 render watcher 依赖收集
re-render 时,vm.render()再次执行,会移除所有 subs 中的 watcer 的订阅,重新赋值

5）派发更新

组件中对响应的数据进行了修改,触发 setter 的逻辑
调用 dep.notify()
遍历所有的 subs（Watcher 实例）,调用每一个 watcher 的 update 方法

二、computed实现原理

computed 本质是一个惰性求值的观察者，同时持有一个 dep 实例；

内部通过watcher的 this.dirty 属性标记计算属性是否需要重新求值；

当 computed 的依赖状态发生改变时,就会通知这个惰性的 watcher，computed watcher 通过 this.dep.subs.length 判断有没有订阅者,

有的话,会重新计算,然后对比新旧值,如果变化了,会重新渲染。 (Vue 想确保不仅仅是计算属性依赖的值发生变化，而是当计算属性最终计算的值发生变化时才会触发渲染 watcher 重新渲染，本质上是一种优化。)；

没有的话,仅仅把 this.dirty = true。 (当计算属性依赖于其他数据时，属性并不会立即重新计算，只有之后其他地方需要读取属性的时候，它才会真正计算，即具备 lazy（懒计算）特性。)

三、computed与watch的区别，运用场景

区别

computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存。只有它依赖的属性值发生改变时，才会重新计算computed的值

watch 侦听器 : 无缓存性，当监听的数据变化时，执行回调，进行处理

运用场景

computed：当我们需要进行数值计算,并且依赖于其它数据时，可以使用 computed。这样可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算

watch：当我们需要在数据变化时执行异步或开销较大的操作时，可以使用 watch。 watch 允许我们执行异步操作 ( 访问一个 API )、限制我们执行该操作的频率、并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的

四、vue3中实现响应式原理，为什么从Vue2中的Object.defineProperty改成了Proxy

从数组层面：

在Vue2中，通过索引修改数组的值，这时候是不能监听到数组变化的。虽然Object.defineProperty可以监控到数组下标变化的能力，但是从性能、体验的性价比出发，就放弃了该特性。为了解决该问题，Vue内部重写了push. pop. unshift. shift. reverse. sort. splice方法，来监听数组修改。由于只是对以上7种方法进行hack，数组的其他属性还是监听不到，有一定的局限性

从Object层面

Object.defineProperty只能劫持对象的属性，因此需要对每个对象的每个属性进行遍历，如果属性是一个Object，那么还需要深度遍历。如果能劫持整个对象才是最佳选择

Proxy可以劫持整个对象，并返回一个新的对象；可以代理数组、代理动态增加的属性

五、Vue中的key作用

key 是给每一个 vnode 的唯一 id，依靠 key，diff 操作可以更准确、更快速

diff 算法的过程中，先会进行新旧节点的首尾交叉对比，当无法匹配的时候会用新节点的 key 与旧节点进行比对，从而找到相应旧节点

更准确 : 因为带 key 就不是就地复用了,在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确,如果不加 key,会导致之前节点的状态被保留下来,会产生一系列的 bug。

更快速 : key 的唯一性可以被 Map 数据结构充分利用,相比于遍历查找的时间复杂度 O(n)，Map 的时间复杂度仅仅为 O(1)

六、nextTick的实现原理

1）vue 用异步队列的方式控制 DOM 更新、nextTick 回调先后执行

2）microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕

3）考虑兼容问题，vue 做了 microtask 向 macrotask 的降级方案

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，才会采用 setTimeout(fn, 0) 代替

七、Vue中是如何实现对Array的方法重写

Vue通过对Array的原型拦截的方式，重写了Array的7个方法：push、pop、unshift、shift、sort、reverse、splice

1）首先获取到数组的：ob = this.__ob__(也就是它的Observer对象)

2）如果有新的值，就调用ob.observeArray，对新的值进行监听

3）接着手动调用ob.dep.notify()，通知render watch执行update

八、Vue中的组件data选项为什么必须是函数

在new Vue()实例中，data 可以直接是一个对象，为什么在 vue 组件中data 必须是一个函数呢?

1）组件是可以复用的

2）js中对象是引用关系，如果组件中的data是对象，那么子组件中的data属性值会相互影响，产生副作用

因此，Vue中data选项必须是function，每个实例可以维护一份一份被返回对象的独立拷贝，而new Vue()实例是不会被复用的，因此不会哟以上问题

九、谈谈Vue中的事件机制，手写$on $off $once $emit实现代码

Vue中的事件机制本身就是一个订阅-发布模式的实现

export function eventsMixin (Vue: Class<Component>) {
  const hookRE = /^hook:/
  Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
    const vm: Component = this
    if (Array.isArray(event)) { // event为数组，则循环遍历调用$on
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$on(event[i], fn)
      }
    } else { // event为string，则将监听事件和回调函数添加到事件处理中心_events对象中
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }
    return vm
  }

  Vue.prototype.$once = function (event: string, fn: Function): Component {
    const vm: Component = this
    // 定义监听事件的回调函数
    function on () {
      vm.$off(event, on)      // 从事件中心移除监听事件的回调函数
      fn.apply(vm, arguments) // 执行回调函数
    }
    on.fn = fn
    vm.$on(event, on) // 通过$on方法注册事件
    return vm
  }

  Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
    const vm: Component = this
    // all，调用this.$off()没有传参数，则清空事件处理中心缓存的事件及其回调
    if (!arguments.length) {
      vm._events = Object.create(null)
      return vm
    }
    // array of events，events为array，则循环遍历调用$off
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$off(event[i], fn)
      }
      return vm
    }
    // specific event,从事件处理中心取出缓存的事件
    const cbs = vm._events[event]
    if (!cbs) { // 如果事件中心没有缓存该事件，直接返回
      return vm
    }
    if (!fn) { // 如果调用$off时，没有传回调函数fn，则直接清空监听该事件的所有回调函数
      vm._events[event] = null
      return vm
    }
    // specific handler
    let cb
    let i = cbs.length
    while (i--) { // 对监听的事件的回调函数进行循环遍历
      cb = cbs[i]
      if (cb === fn || cb.fn === fn) { // 如果入参fn === 缓存的回调函数，或者入参fn === 缓存的cb.fn，则剔除该缓存的回调函数
        cbs.splice(i, 1)
        break
      }
    }
    return vm
  }

  Vue.prototype.$emit = function (event: string): Component {
    const vm: Component = this
    if (process.env.NODE_ENV !== 'production') {
      const lowerCaseEvent = event.toLowerCase()
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          `Event "${lowerCaseEvent}" is emitted in component ` +
          `${formatComponentName(vm)} but the handler is registered for "${event}". ` +
          `Note that html attributes are case-insensitive and you cannot use ` +
          `v-on to listen to camelCase events when using in-DOM templates. ` +
          `You should probably use "${hyphenate(event)}" instead of "${event}".`
        )
      }
    }
    let cbs = vm._events[event]
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      const info = `event handler for "${event}"`
      for (let i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info)
      }
    }
    return vm
  }
}

// 实际是执行回调函数
export function invokeWithErrorHandling (
  handler: Function,
  context: any,
  args: null | any[],
  vm: any,
  info: string
) {
  let res
  try {
    res = args ? handler.apply(context, args) : handler.call(context)
    if (res && !res._isVue && isPromise(res) && !res._handled) {
      res.catch(e => handleError(e, vm, info + ` (Promise/async)`))
      // issue #9511
      // avoid catch triggering multiple times when nested calls
      res._handled = true
    }
  } catch (e) {
    handleError(e, vm, info)
  }
  return res
}

十、说说Vue的渲染过程

1、new Vue()实例的时候，主要做了以下工作：

调用了内部方法_init()

1）给私有属性_uid自增1，每个组件每一次初始化时做的一个唯一的私有属性标识

2）合并options，并赋值给实例属性$options

3）定义实例私有属性vm._self = vm ，用于访问实例的数据和方法

4）调用initLifecycle(vm) ：确认组件的父子关系；初始化实例属性vm.$parent、 vm.$root 、vm.$children、 vm.$refs；初识化内部相关属性

5）调用initEvents(vm) ：将父组件的自定义事件传递给子组件；初始化实例内部属性_events（事件中心）、_hasHookEvent；

6）调用initRender(vm) ：提供将render函数转为vnode的方法；初始化实例属性$slots、$scopedSlots；定义实例方法$createElement；定义响应式属性：$attrs、$listeners；

7）调用callHook(vm, 'beforeCreate') ，执行组件的beforeCreate钩子

8）调用initInjections(vm) ，resolve injections before data/props

9）调用initState(vm) ，对实例的选项props、data、computed、watch、methods初始化