原理篇--数据响应式

一、vue数据响应式，有几个关键的点

1、侦测数据的变化

2、收集视图依赖了哪些 数据

3、数据变化时，自动‘通知’需要更新的视图部分，并进行更新

二、vue2.xxx实现数据响应式

1、vue通过Object.defineProperty来将对象的属性设置成访问器属性，setter和getter方法来监听数据的变化

2、通过getter进行依赖收集

3、而每一个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图

三、vue2.xxx通过Object.defineProperty实现数据监听和拦截的不足之处

1、Object.defineProperty设置的访问器属性的getter/setter只能追踪一个数据是否被修改，无法追踪新增属性和删除属性

如果是删除属性，我们可以用vm.$delete实现

如果是新增属性，我们可以用vm.$set实现，也可以给对象重新赋值（比如：data.option = {...data.option,a:1}）

2、Object.defineProperty不能监听数组的变化

vue内部将数组的常用方法进行了重写，重写后的数组方法需要能够被拦截，但有些方法对数组的操作仍然是拦截不到的，如下：

obj.length = 0;//改变length

obj[0] = 1;//操作下标

四、vue3.xxx实现数据响应式

通过Proxy代理，Proxy代理是针对整个对象的，而不是对对象的某个属性；同时，Proxy还支持代理数组的变化