Vue基本原理

Vue基本原理

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

vue3则使用的是ES6中的proxy方法。通过对对象的代理，从而实现数据上的挟持。

proxy方法是一种代理，可以拦截并改变底层js。调用proxy可以为一个目标对象创建一个代理，在这个代理里面编写需要拦截的内容。在调用proxy构造函数时需要传入两个参数，第一个是目标对象，第二个是代理操作对象。

兼容性

vue2x不支持支持IE8及以下浏览器

vue3不支持IE11

优缺点

vue2x

• 无法监听对象的属性添加或删除
• 无法通过下标去修改数组，长度

解决方法vue.$set()

• 数组部分操作是响应式的

push();
pop();
shift();
unshift();
splice();
sort();
reverse();

vue3

• proxy 直接代理整个对象而非对象属性，这样只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性。

• proxy 可以监听数组的变化。