前端面试2

如何理解MVVM

MVVM，就是model、view、以及Vue自带的ViewModel。model为数据层，view为显示层，这点和原先的MVP的MV相同，区别是MVVM模式只需要把编码重点放在model层和view层，比原先的MVP模式至少省下30%编码量，甚至能省下70%DOM操作，因为用MVP模式的话主要是在进行DOM操作。

vue响应式原理

vue实现响应式原理的核心是Object.definePropert

1. 通过Object.defineProperty监听数据的get,set来做一些我们想去做的事情(像是vue vdom数据更新的updateComponent)
2. 将data属性代理到了vm上

vue深度监听data变化

对象内部的某个属性改变的时候无法触发watch函数，这个时候就需要使用vue的深度监听

vue如何监听数组的变化

• 先获取原生 Array 的原型方法，因为拦截后还是需要原生的方法帮我们实现数组的变化。
• 对 Array 的原型方法使用 Object.defineProperty 做一些拦截操作。
• 把需要被拦截的 Array 类型的数据原型指向改造后原型。

vue虚拟dom

Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用
虚拟dom进行diff，算出最小差异，然后再修改真实dom。

vue的virtual dom的diff算法是基于snabbdom算法改造而来，与react的diff算法一样
仅在同级的vnode间做diff，递归的进行同级vnode的diff，最终实现整个DOM树的更新。

虚拟DOM的缺点：

1. 代码更多，体积更大

2. 内存占用增大

3. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快

vue虚拟dom-diff算法

如何用js实现hash路由

vue-cli默认就是hash模式，这种模式下不用考虑页面刷新404的问题

vue模板编译原理

• 将 模板字符串 转换成 element ASTs

• 对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化

• 使用 element ASTs 生成 render 函数代码字符串