vue前端面试题2

目录

一 MVVM

二 vue响应式原理

三 vue响应式缺陷

四 vue3.0为啥使用proxy实现响应式

五 组件中的data为什么是一个函数

六  v-model的原理

七 vue事件绑定原理

八  什么是虚拟DOM以及它的本质

九 为什么要在v-for中使用key

一 MVVM

MVVM即model-view-viewModel的缩写，model是数据模型，vue是页面，vueModel也就是MVC的Controller演变而来的，vueModel作为model和vue之间的桥梁，数据会绑定到viewModel层并自动渲染到页面，视图变化的时候会通知viewModel层更新数据

二 vue响应式原理

当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

三 vue响应式缺陷

Object.DefineProporty()无法监控数组下标的变化，导致通过数组下标添加元素不能实时响应
Object.DefineProporty()本身是可以监控到数组下标变化的，但是在vue中，从性能上考虑，就废弃了这个特性
Object.DefineProporty()只能劫持对象的属性，从而需要对每个对象、每个属性进行遍历，如果属性值是对象，还需要深度遍历

四 vue3.0为啥使用proxy实现响应式

Proxy可以劫持整个对象，并返回一个新的对象
Proxy不仅可以代理对象，还可以代理数组

五 组件中的data为什么是一个函数

一个组件被复用多次的话，也就会创建多个实例，本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用数据类型。所以为了保证不同组件实例的data不冲突，data必须是一个函数。

六  v-model的原理

v-model本质就是一个语法糖，可以看成是value+input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

七 vue事件绑定原理

原生事件绑定原理是通过addEventListener绑定给真实元素的，组件事件是通过Vue自定义的$on实现的。

八  什么是虚拟DOM以及它的本质

由于在浏览器中操作DOM是很昂贵的，频繁的操作DOM，会产生一定的性能问题，这就是虚拟DOM的产生原因。虚拟DOM本质上是JavaScript对象，是对真实DOM的抽象状态变更时，记录新树与旧树的差异，最后把差异更新到真正的DOM中
Vue2的虚拟DOM借鉴了开源库Snabbdom的实现
虚拟dom的本质就是运用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。(也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中)
虚拟dom映射到真实dom要经历VNode的create、diff、patch等阶段

key的作用是尽可能的复用DOM元素
新旧children中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的，需要在新旧children的节点中保存映射关系，以便能够在旧children的节点中找到可复用的节点。key也就是children中节点的唯一标识。

九 为什么要在v-for中使用key

1.必须用key,且不能是index和random
2.diff算法通过tag和key来判断，是否是sameNode
3.减少渲染次数，提升渲染性能，高效更新虚拟Dom