2020大厂前端面试之vue专题（一）javascriptqq40665861的博客-

1.谈一下你对MVVM原理的理解

• 传统的 MVC 指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理,控制器会获取数
  据。将结果返回给前端,页面重新渲染
• MVVM :传统的前端会将数据手动渲染到页面上, MVVM 模式不需要用户收到操作 dom 元素,将数据绑
  定到 viewModel 层上，会自动将数据渲染到页面中，视图变化会通知 viewModel层 更新数据。
  ViewModel 就是我们 MVVM 模式中的桥梁.

2.请说一下响应式数据的原理？

理解:

• 1.核心点: Object.defineProperty
• 2.默认 Vue 在初始化数据时，会给 data 中的属性使用 Object.defineProperty 重新定义所有属
  性,当页面取到对应属性时。会进行依赖收集（收集当前组件的watcher） 如果属性发生变化会通
  知相关依赖进行更新操作。

原理:

Object.defineProperty(obj, key, {         enumerable: true,         configurable: true, get: function reactiveGetter() { const value = getter ? getter.call(obj) : val             if (Dep.target) {                 dep.depend() // ** 收集依赖 ** / if (childOb) {                     childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value         }, set: function reactiveSetter(newVal) { const value = getter ? getter.call(obj) : val             if (newVal === value || (newVal !== newVal && value !== value)) { return } if (process.env.NODE_ENV !== 'production' && customSetter) { customSetter() }             val = newVal             childOb = !shallow && observe(newVal)             dep.notify() /**通知相关依赖进行更新**/ } }) 

3.Vue中是如何检测数组变化?

理解:

• 使用函数劫持的方式，重写了数组的方法
• Vue 将 data 中的数组，进行了原型链重写。指向了自己定义的数组原型方法，这样当调用数组
  api 时，可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。

原理:

 const arrayProto = Array.prototype     export const arrayMethods = Object.create(arrayProto) const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ]     methodsToPatch.forEach(function (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         }) }) this.observeArray(value) // 进行深度监控 

4.为何Vue采用异步渲染?

理解：

• 因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染.所以为了性能考虑。 Vue
  会在本轮数据更新后，再去异步更新视图!

原理:

 update() { /* istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this); // 当数据发生变化时会将watcher放到一个队列中批量更新 } } export function queueWatcher(watcher: Watcher) { const id = watcher.id // 会对相同的watcher进行过滤 if (has[id] == null) {             has[id] = true if (!flushing) {                 queue.push(watcher) } else { let i = queue.length - 1 while (i > index && queue[i].id > watcher.id) {                     i-- }                 queue.splice(i + 1, 0, watcher) } // queue the flush if (!waiting) {                 waiting = true if (process.env.NODE_ENV !== 'production' && !config.async) { flushSchedulerQueue() return } nextTick(flushSchedulerQueue) // 调用nextTick方法 批量的进行更新 } } } 

5.nextTick实现原理?

理解:(宏任务和微任务) 异步方法

• nextTick 方法主要是使用了宏任务和微任务,定义了一个异步方法.多次调用 nextTick 会将方法存入
  队列中，通过这个异步方法清空当前队列。 所以这个 nextTick 方法就是异步方法

原理:

let timerFunc // 会定义一个异步方法 if (typeof Promise !== 'undefined' && isNative(Promise)) { // promise const p = Promise.resolve() timerFunc = () => {             p.then(flushCallbacks) if (isIOS) setTimeout(noop) }         isUsingMicroTask = true } else if (!isIE && typeof MutationObserver !== 'undefined' && ( //         MutationObserver isNative(MutationObserver) ||             MutationObserver.toString() === '[object MutationObserverConstructor]' )) { let counter = 1 const observer = new MutationObserver(flushCallbacks) const textNode = document.createTextNode(String(counter))         observer.observe(textNode, {             characterData: true }) timerFunc = () => {             counter = (counter + 1) % 2             textNode.data = String(counter) }         isUsingMicroTask = true } else if (typeof setImmediate !== 'undefined') { // setImmediate timerFunc = () => { setImmediate(flushCallbacks) } } else { timerFunc = () => { // setTimeout setTimeout(flushCallbacks, 0) } } // nextTick实现 export function nextTick(cb?: Function, ctx?: Object) { let _resolve         callbacks.push(() => { if (cb) { try {                     cb.call(ctx) } catch (e) { handleError(e, ctx, 'nextTick') } } else if (_resolve) { _resolve(ctx) } }) if (!pending) {             pending = true timerFunc() } } 

6.Vue中Computed的特点

理解:

• 默认 computed 也是一个 watcher 是具备缓存的，只要当依赖的属性发生变化时才会更新视图

原理:

 function initComputed(vm: Component, computed: Object) { const watchers = vm._computedWatchers = Object.create(null) const isSSR = isServerRendering() for (const key in computed) { const userDef = computed[key] const getter = typeof userDef === 'function' ? userDef : userDef.get if (!isSSR) { // create internal watcher for the computed property.                 watchers[key] = new Watcher(                     vm,                     getter || noop,                     noop,                     computedWatcherOptions                 ) } // component-defined computed properties are already defined on the // component prototype. We only need to define computed properties defined // at instantiation here. if (!(key in vm)) { defineComputed(vm, key, userDef) } else if (process.env.NODE_ENV !== 'production') { 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) } } } } function createComputedGetter(key) { return function computedGetter() { const watcher = this._computedWatchers && this._computedWatchers[key] if (watcher) { if (watcher.dirty) { // 如果依赖的值没发生变化,就不会重新求值                     watcher.evaluate() } if (Dep.target) {                     watcher.depend() } return watcher.value             } } } 

7.Watch中的deep:true 是如何实现的

理解:

• 当用户指定了 watch 中的deep属性为 true 时，如果当前监控的值是数组类型。会对对象中的每
  一项进行求值，此时会将当前 watcher 存入到对应属性的依赖中，这样数组中对象发生变化时也
  会通知数据更新

原理:

 get() { pushTarget(this) // 先将当前依赖放到 Dep.target上 let value         const vm = this.vm         try {             value = this.getter.call(vm, vm) } catch (e) { if (this.user) { handleError(e, vm, `getter for watcher "${this.expression}"`) } else { throw e             } } finally { if (this.deep) { // 如果需要深度监控 traverse(value) // 会对对象中的每一项取值,取值时会执行对应的get方法 } popTarget() } return value     } function _traverse(val: any, seen: SimpleSet) { let i, keys         const isA = Array.isArray(val) if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) { return } if (val.__ob__) { const depId = val.__ob__.dep.id             if (seen.has(depId)) { return }             seen.add(depId) } if (isA) {             i = val.length             while (i--) _traverse(val[i], seen) } else {             keys = Object.keys(val)             i = keys.length             while (i--) _traverse(val[keys[i]], seen) } } 

8.Vue组件的生命周期

理解:

要掌握每个生命周期什么时候被调用

• beforeCreate 在实例初始化之后，数据观测(data observer) 之前被调用。
• created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data
  observer)，属性和方法的运算， watch/event 事件回调。这里没有$el
• beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
• beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
• updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
• beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed Vue 实例销毁后调用。调用后， Vue 实例指示的所有东西都会解绑定，所有的事件
  监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

要掌握每个生命周期内部可以做什么事

• created 实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。
• mounted 实例已经挂载完成，可以进行一些DOM操作
• beforeUpdate 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• updated 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，
  因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。
• destroyed 可以执行一些优化操作,清空定时器，解除绑定事件
  
  

原理:

9.ajax请求放在哪个生命周期中

理解:

• 在created的时候，视图中的 dom 并没有渲染出来，所以此时如果直接去操 dom 节点，无法找到相
  关的元素
• 在mounted中，由于此时 dom 已经渲染出来了，所以可以直接操作 dom 节点

一般情况下都放到 mounted 中,保证逻辑的统一性,因为生命周期是同步执行的， ajax 是异步执行的

服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中

10.何时需要使用beforeDestroy

理解:

• 可能在当前页面中使用了 $on 方法，那需要在组件销毁前解绑。
• 清除自己定义的定时器
• 解除事件的绑定 scroll mousemove …

后续文章: 专题二.