Vue的响应式原理与diff算法的理解

前端面试中主技术栈是vue的小伙伴应该都知道，这道题会被经常问到，也是老生常谈的一些题，下面简单说一下这些题：

一、什么是vue的响应式原理？

答：

1、首次数据加载的时候，比如我data里面有age，name，通过Object.defineProperty 对数据进行劫持, 把每一个对象都添加 get 和 set 方法，要是对象里面还包含对象，就用递归也给里面的每一项添加 get 和 set 方法，（有多少层，添加多少层）

2、还有一种情况是数组，重写数组的七个方法，

（1） 通过 Array.prototype 拿到数组的原型

（2）Object.create 复制一份数组的原型并重写部分方法,（push,pop,unshift,shift,reverser,sort,splice,） 再将这个新方法赋值

二、vue中diff算法理解

答：

1、渲染时,新旧dom对比，先比较父节点的tag（标签名），key值，如果相同，则复用老节点，
该替换的替换，该保留的保留，标签和key 不同的则直接替换。

2、比较完父节点，父节点中包含子节点，比较子节点。

（1）如果新dom节点有子节点，老dom节点没有子节点， 直接用的新的节点创建。
（2）如果新dom节点中没有子节点，老dom节点中有子节点，则直接删除老dom节点中的子节点。

3、如果新dom节点和老dom节点都有子节点（采用双指针的方式） 

  (1）新老节点先进行头头比较，指针向下移动，如果key和标签不相同，指针停止。

（2）如果不满足条件1，新老节点会进行尾尾较，指针向上移动，如果key和标签不相同，指针停止。

（3）如果不满足条件1、2，则会进行交叉比较，头指针 --> 尾指针，尾指针-->头指针，如果还是不满足条件，则进行暴力比较。

 暴力比较： 用新的虚拟dom 去老的里边进行查找，找到移动位置，找不到创建dom