大厂面试题，offer根本停不下来！！！

开始吧

又是精彩一天，让我们继续学习崭新的知识吧。今天为大家带来几道关于vue源码的题目，这几题也是面试官常问的问题，所以请大家接下来和猿猴我努力的卷起来吧！！！

一、vue双向绑定的原理

我们都知道我们在vue中去使用我们的$\color{green}{v-model}$,来实现我们的双向绑定，其实在学过react后我觉得vue的指令就好像都是语法糖，v-model的原理其实就可以理解为$\color{green}{input}$框是$\color{green}{v-bind}$去将我们的要绑定的参数绑定到$\color{green}{value}$属性，然后通过$\color{green}{v-on}$的input方法监听$\color{green}{input}$值的变化，然后input直接将接受的$\color{green}{event}$复制给我们value绑定的属性，来去实现我们的v-model。这就是我们的vue的双向绑定的原理。

二、vue里的key的作用是什么? 为什么不能用Index？用了会怎样? 如果不加key会怎样?

我们都知道vue采用我们的$\color{green}{diff}$算法去$\color{green}{tree-shaking}$也就是对我们的虚拟dom进行摇树，diff算法的具体实现过程vue2和vue3还不一样，有兴趣的同学可以自己去了解下，我这里主要讲为什么不要index就不细说了，然后我们的key在diff算法的时候就是去对比我们的key，相同的key去对比是否有变化，或者新增的vdom没有可以对比就直接渲染。在这里如果用了index的话就可能我删除了中间的元素，然后后面元素的key全部网上调一级,去重新渲染造成意想不到的bug，如果不加key的话就直接全部直接重新渲染。

三、vue响应式的原理

vue的响应式在vue2中是采用我们的$\color{green}{Object.defineproperty}$的去循环我们data中的每个属性用set和get方法去做数据劫持并操作，vue3也同理只不过vue3采用的是$\color{green}{proxy}$，这个api更加的强大，不仅能做set和get的数据劫持，还能去做delete的数据劫持，而且不用去遍历data，他可以直接代理整个data里面的属性。

总结

好了还是老样子吧我们今天还是学习三题，如果感兴趣的同学，关注下猿猴我，更方便的与猿猴我一起学习探讨下去。