30道常见的vue面试题

Vue.js 面试题总结 Vue.js 是一個渐进式的 JavaScript 框架，核心库加插件，动态创建用户界面。它借鉴了 Angular 的模板和数据绑定技术，又借鉴了 React 的组件化和虚拟 DOM 技术。Vue.js 的特点是 MVVM 模式，代码简洁体积小，运行效率高，适合移动 PC 端开发。 Vue.js 的理解 Vue.js 是一個渐进式的 JavaScript 框架，它的核心库加插件，可以动态创建用户界面。Vue.js 借鉴了 Angular 的模板和数据绑定技术，又借鉴了 React 的组件化和虚拟 DOM 技术。Vue.js 的特点是 MVVM 模式，代码简洁体积小，运行效率高，适合移动 PC 端开发。 MVVM 模式 MVVM 模式是指 Model-View-ViewModel 模式。Model 表示数据模型层，View 表示视图层，ViewModel 是 View 和 Model 层的桥梁，数据绑定到 ViewModel 层并自动渲染到页面中，视图变化通知 ViewModel 层更新数据。 响应式数据 Vue.js 实现响应式数据的原理是使用 Object.defineProperty 重新定义数据的获取与设置，进行依赖收集和通知。具体的过程是：首先 Vue 使用 initData 初始化用户传入的参数，然后使用 newObserver 对数据进行观测，如果数据是一个对象类型就会调用 this.walk(value) 对对象进行处理，内部使用 defineReactive 循环对象属性定义响应式变化，核心就是使用 Object.defineProperty 重新定义数据。 响应式数据在数组中的实现 在数组中，Vue.js 使用 Object.defineProperty 重新定义数组的每一项，那些可能引起数组变化的方法，如 pop、push、shift、unshift、splice、sort、reverse 等，只要这些方法执行改了数组内容，就更新内容就好了。同时，数组里每一项可能是对象，那么 Vue.js 就会对数组的每一项进行观测。 事件绑定原理 Vue.js 的事件绑定原理是使用原生 DOM 的绑定：Vue 在创建真实 DOM 时会调用 createElm，defaults 会调用 invokeCreateHooks。会遍历当前平台下相对的属性处理代码，其中就有 updateDOMListeners 方法，内部会传入 add() 方法组件绑定事件，原生事件，自定义事件；组件绑定之间是通过 Vue 中自定义的 $on 方法实现的。 v-model 的实现原理 v-model 可以看成是 value+input 方法的语法糖（组件）。原生的 v-model，会根据标签的不同生成不同的事件与属性。自定义 v-model 可以自己写 model 属性，里面放上 prop 和 event。 异步渲染 Vue.js 采用异步渲染的原因是因为它是组件级更新，如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能，Vue.js 会在本轮数据更新后，在异步更新视图。核心思想是 nextTick，dep.notify() 通知 watcher 进行更新，subs[i].update 依次调用 watcher 的 update，queueWatcher 将 watcher 去重放入队列，nextTick（flushSchedulerQueue）在下一 tick。