Vue 20 道面试题及答案.docx

Vue.js 面试题及答案 本文档涵盖了 Vue.js 的一些重要概念和技术要点，包括 MVVM 模式、响应式数据原理、数组变化监测、nextTick 实现原理、生命周期钩子函数等。 MVVM 模式 MVVM 模式是 Model-View-ViewModel 的缩写， ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 ViewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 ViewModel 层更新数据。 响应式数据原理 Vue 2.x 中的响应式数据原理是使用 Object.defineProperty 重新定义 data 中的所有属性，当页面使用对应属性时，首先会进行依赖收集（收集当前组件的 watcher），如果属性发生变化会通知相关依赖进行更新操作（发布订阅）。 Vue 3.x 中的响应式数据原理是使用 Proxy 替代 Object.defineProperty，Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。 数组变化监测 在 Vue 2.x 中，数组变化监测使用了函数劫持的方式，重写了数组的方法，Vue 将 data 中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组 api 时，可以通知依赖更新。 nextTick 实现原理 nextTick 的实现原理是使用宏任务和微任务，根据执行环境分别尝试采用 Promise、MutationObserver、setImmediate，如果以上都不行则采用 setTimeout，定义了一个异步方法，多次调用 nextTick 会将方法存入队列中，通过这个异步方法清空当前队列。 生命周期钩子函数 Vue 的生命周期钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。每个钩子函数都有其特定的用途和限制，例如 created 钩子函数可以对数据进行更改，而 mounted 钩子函数可以访问 Dom 节点。 Computed 和 Watch Computed 本质是一个具备缓存的 watcher，依赖的属性发生变化就会更新视图。Watch 是一个观察者，用于监听数据的变化，并执行相应的操作。 接口请求 一般来说，接口请求应该放在 mounted 生命周期钩子函数中，但是需要注意的是服务端渲染时不支持 mounted，需要放到 created 中。